참고 - 생활코딩 WEB2 CSS 01~09
https://opentutorials.org/course/3086
WEB2 - CSS - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인
opentutorials.org
HTML 은 디자인에 한계가 있음
--> 그럼 디자인에 관한 태그를 새로 추가하면 되지 않나?
--> 한계가 존재. 무슨 한계일까?
`<a>` : 링크라는 걸 설명하는 정보 --> 이러한 정보를 해석해서 웹브라우저가 유저가 필요한 정보를 줌.
반대로 `<font>` 라는 태그(지금은 안씀, 기억할 필요X) : 어떠한 정보도 없고 그냥 디자인.
--> 한계 : 웹페이지의 정보성 가치를 현저하게 떨어뜨림.
`<!--` `-->` 주석 처리
`<style>` CSS 문법 `</style>`
CSS 문법을 쓰면 중복을 제거하기 수월함.
`style` 속성
style="효과"
`text-decoration: none` 밑줄X
`text-decoration: underline` 밑줄O
효과(property) 지정 이후에는 `;` 붙여서 구분 가능.
<style>
선택자 {
효과(Property: Property Value;)
}
</style>
`font-size: 45px` : 45픽셀로 폰트 사이즈 설정
`text-align: center` : 가운데 정렬
`.선택자`
`class="선택자"`
선택자는 띄어쓰기로 구분가능.
뒤에 있는게 우선순위를 가짐.
`#선택자`
`id="선택자"`
id선택자가 class선택자보다 우선순위를 가짐.
우선순위 : id 선택자 > class 선택자 > 태그 선택자
id 값은 단 한 번만 등장하게. 중복 불가.
즉, id 선택자가 class 선택자보다 구체적임.
우선순위는 구체적 --> 포괄적 순.
박스모델 만들기
h1은 화면 전체를 쓰는 반면,
<a> 태그는 콘텐츠 크기만 부피를 씀.
화면 전체를 쓰는 태그 : block level element
자기 자신만큼 쓰는 태그 : inline element
display: inline;
display: block;
이걸로 변경 가능.
display: none; --> 이걸 하면 화면에서 사라짐
`선택자, 선택자` : 콤마로 중복 없애기 가능.
`padding` : 콘텐츠와 테두리의 간격
`margine` : 테두리와 테두리의 간격
width로 박스 크기 변경 가능
웹페이지 화면에서 우클릭하면 검사가 나옴.
박스 모델 활용하기.
