[Free Code Camp] HTML, CSS 공부 핵심요약

Free code camp는 유명한 무료 강의를 하는 곳이다. 

아래와 같은 언어들 및 프로그래밍 기술에 대해 배울수있다.

안드로이드만 주로 개발해서 아래에 익숙하지 않은 것들이 많긴 하지만, 하나하나 공부 잘해보도록 하겠다.

[HTML & CSS 강의 요약 및 정리 내용]

먼저 Free code camp 강의 중 html, css를 공부하며 각 강의마다 중요한 것들에 대해 정리해놓았다.

1. 항상 html element는 opening tag, closing tag로 만들어짐

2. <p> </p> : 단락을 띄움

3. <!--     -->로 주석처리가 가능

 

4. style 속성을 이용해 색넣기

<h2 style="color:blue">CatPhotoApp</h2>

5. CSS속성은 수백가지이다.

<style>
  h2 {color: red;}
</style>

h2 속성인것에 색을 줄수 있음

<h2 style="color:blue">CatPhotoApp</h2>

6. style css를 만들어 html 태그에 추가할 수 있음 

<style>

  .red-text {

    color: red;

  }

</style>

<h2 class="red-text">CatPhotoApp</h2>

7. font 사이즈도 CSS를 통해 컨트롤이 가능함.

h1 {
  font-size: 30px;
}

  p 태그를 가지고 있는 것은 글자크기를 16으로함.

<style> .red-text { color: red; } p { font-size: 16px; } </style>

8. CSS  style을 이용해 글씨체 넣기도 가능.

-> 아래처럼 font-family 를 이용

h2 {
  font-family: Sans-serif;
}

9. 구글폰트도 링크를 이용하여 import가 가능함

-> 링크를 위에 붙이고 바로 css를 이용하여 바로 import 가능함

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>

  h2 {

    font-family: Lobster, Monospace;

  }

</style>

9. Font degrade 대비.

-> 아래처럼 font-family 를 이용하는데 Helvetica 폰트가 없으면 Sans-Serif 폰트를 쓰게 함

p {
  font-family: Helvetica, Sans-Serif;
}

10. 웹링크를 이용하여 이미지 추가하는 방법

-> img 태그에 src에 주소를 넣어주면 이미지 추가가 가능

-> alt 속성을 이용해 text를 넣을 수 있음

<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up. ">

11. CSS를 이용해서 이미지 크기 조정도 가능

<style>
  .larger-image {
    width: 500px;
  }
</style>

26. style을 이용해 border속성을 만들 수 있음

-> 아래처럼 color, width, style 설정이 가능

-> border-radius를 이용하면 테두리를 둥글게 할수 있음 : 10px, 50% 모두 가능함

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;

border-radius: 10px

  }
</style>

# 하나의 태그에 두개이상의 클래스를 넣을 수도 있음

<img class="class1 class2">

28. a href태그를 이용해 외부 페이지 링크가 가능함

<p>Here's a <a href="http://freecodecamp.com"> link to Free Code Camp</a> for you to follow.</p>

30. href 속성에 주소 대신 #을 넣으면 이것은 죽은 링크임

-> 즉 클릭할 수 있게 커서가 잡히지만 클릭해도 무반응

<a href="#">

32. ul, li 태그를 사용하면 unordered lists가 생기게 할 수 있음

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

33. ol, li태그를 이용하면 ordered list 사용이 가능함 

-> 번호가 메겨지는 것임

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

35. Input 태그의 placeholder 속성은 내용을 넣을 수 있게 하는 것임

<input type="text" placeholder="this is placeholder text">

36. form

37. 버튼 넣기

<button type="submit">this button submits the form</button>

38. HTML5를 이용하여 require 만들기

<input type="text" required>

41. Radio checkbox

input 태그에 checked 를 입력하면 자동으로 입력됨

<input type="radio" name="test-name" checked>

42. div element

: div element는 HTML 모든 element들 중 가장 널리 사용됨

: 그룹으로 묶을 때 사용

43. 배경 Color 넣기

-> style 안에 넣으면 됨

아래의 내용을 style 안에 넣고

.green-background {
  background-color: green;
}

쓰려고하는 쪽에 class로 넣으면 됨

-> <div class="green-background> 이런식

44. ID는 unique한 값임

<form id="cat-photo-app">

45. style안에 id로 연결시켜 사용할 때는 #을 이용 / 즉 #으로 스타일을 만들때는 class로 넣지않고 id 로 넣음

#cat-photo-element {
  background-color: green;
}

(Use ID Attributes Tyle an Element의 캡쳐 넣기)

46. Element에 Padding 적용하기

모든 HTML element들은 사각형임

padding 속성 : border(지역) 사이를 컨트롤 할 수 있음

-> padding을 늘리면 그 지역이 늘어남

48. 부정적 margin 더하기

margin은 해당지역과 주위지역 사이의 공간을 표시

-> -10px 같은 - 값을 넣으면 전체 수평너비가 모두 공간이 참

51. padding도 margin처럼 padding-top, padding-right 속성 조절이 가능. 여백이 아니라 해당 구역의 너비를 늘려줌

47. Element에 Margin 적용하기

margin은 구석에 너비라, 늘리면 실제 지정된 구역이 작아질 수 있음. 늘리면 주위의 구역이 늘어남

50.

margin-bottom, margint-left등의 속성을 사용할 수 있는데 사용하면 해당 부분에 margin(여백)을 늘려주는 것임

CSS 상속

52. style을 이용해 배경색 넣기

Style안에 아래를 넣주면 기본 바탕이 됨

body {
  background-color: black;
}

ㅇㄹ

38.

ㄴㅇㄹㄴ