[수업노트](20.10.08~12)D+1,D+2 웹페이지의 구성요소/display 속성/엘리먼트 관계/Font weight, letter spacing, font size

1. 웹페이지 3대 구성요소- HTML, CSS, JS의 역할

1. HTML(배우): 전체적인 레이아웃과 컨텐츠 구성(글내용)
  - 구성: 여는태그< > +컨텐츠 글내용+닫는태그</ >= 하나의 엘리먼트
    ex) <div>안녕하세요</div>
  - 태그는 화면에 나오지 않는다.
  - 웹문서를 만들어내고, 웹문서들이 모여 웹페이지를 구성한다.

2. CSS(스타일리스트): 세부적 디자인(글꼴, 글색 등)
 - 구성: html선택자, 대괄호, 설정값
    ex) content{color:red;}
 - 공통으로 적용할 선택자는 { }앞에 여러개 사용가능
 - 개별 선택자가 생길 경우 새로운 태그를 생성하여 설정값을 추가
 - 입력한 선택자와 설정값은 지우지 않고 아래에 계속 추가

3. JS(감독)

---

2. (CSS)Display 속성

주로 사용하는 태그
- div
- section
- nav
- article

 

display속성

	inline-block,inline	block	none
너비	너비를 지정하지 않는 한, 최소한으로 줄어든다.	너비를 지정하지 않는 한, 최대한으로늘어난다	사라진다
높이	높이를 지정하지 않는 한, 최소한으로 줄어든다.	높이를 지정하지 않는 한, 최소한으로 줄어든다.
줄사용	글자화 한줄을 여럿이서 쓴다	블럭화 한 줄 무조건 혼자 쓴다
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용 정렬

- div, section, nav, article의 기본 display 속성값은 block 이다.

-  a, img, span 엘리먼트는 기본적으로 display가 inline 이다

- inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

-   html의 모든 엘리먼트는 기본의 스타일(=기본값)을 가지고있다.
     ex) color=black, display= block

---

3. (HTML)엘리먼트 관계

- 부모 앨리먼트: 나를 감싸는 엘리먼트
- 자식 앨리먼트: 내가 감싸는 엘리먼트
- 형제 앨리먼트: 같은 부모를 둔 엘리먼트

---

4. (CSS)Font weight, letter spacing, font size

- font weight 굵기: nomal, bold
- font size 크기: px, rem(기본값의 3배)
- letter spacing 자간: px,rem
- font color 색: - red, green, blue...
- #000000 블랙
- #FFFFFF 화이트
- #afafaf 그레이
- #FF0000 레드
- color rgba 투명도: (255.0.0.0)