$$config title: 2일차 웹1 keywords: - display - 엘리먼트의 관계 - 젠코딩 - 텍스트 스타일 - 테이블 - a 와 br태그 $$ # 단축키 - 미리보기 모드 토글 : ctrl + alt + shift + p # display 속성 - block - 너비 : 너비가 지정되어 있지 않으면, 최대한으로 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 한줄에 하나만 존재한다 - inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 한줄에 여럿이 존재한다 - 덤 - 너비와 높이를 지정해주면 내용물의 크기는 무시하고 지정된 수치만큼 적용된다. # 젠코딩 ``` div>section*2> + Tab키

``` # 테스트 스타일 정리 - font-weight: 글자의 두께를 조절 - lighter, normal, bold, bolder - 100단위로 100~900 - font-weight의 기본값은 normal이다. - font-size : 글자의 크기를 조절 - px, rem - %와 em도 사용하지만 많이 사용하지 않는다. - letter-spacing : 글자의 자간을 조절 - 음수 값이면 좁아지고 정수 값이면 넓어진다. - letter~spacing의 기본값은 0이다. - color : 글자의 색상을 조절 - black, red, blue, green 등 - HEX 코드 : #000000 - rgba(0,0,0.1) : rgba(red값, green값, blue값, 투명도(소수0~1)) - color:rgba(0,0,0,0.5)->이런 식으로 사용한다. # 테스트 스타일 코딩(수업) ``` 1. html

안녕

css div { font-weight: bold; font-size: 100px; color:gray; } section{ font-weight: normal; font-size: 20rem; color:rgba(255,0,0,0.50); } ``` # 테스트 스타일 코딩(응용) ``` CSS font

폰트 스타일

'안녕'(볼드,그레이)

'안녕'(노말,반투명)

``` # 테이블 - table : 테이블(표) 태그 - tr : 테이블의 열 태그 - th : 각 열의 제목, 자동으로 font-weight:bold와 중앙 정렬이 된다. - td : 테이블의 칸 # a 와 br - a - a 태그는 링크를 걸어주는 태그이다. - a 태그의 target 속성은 연결된 링크를 어디에서 여는지정해주는 속성이다. - target의 기본값은 _self 이다. 현재 페이지에서 열어준다. - target 값 중에 _blank는 새 창이나 새 탭에서 열어준다. - br - br은 줄바꿈 태그이다. - br 태그는 종료 태그가 없다.