HTML/CSS - 0705
0705 HTML/CSS
CSS 선택자 - ppt 6장
태그 선택자
- CSS style 태그에서 선택자 태그명을 사용하는 것
- 웹 페이지에서 태그가 사용된 영역 선택, 해당 역역에 CSS 명령을 적용
- CSS style 태그 내의 body 태그 선택
<style>
body {
font-family: '돋움';
}
</style>
id 선택자
- 웹 페이지에서 하나만 존재하는 유일한 특정 역역 선택
- 태그 내의 id 속성을 지정, -> id 값은 html 태그 내에서 '고유'해야 한다.
- html 태그 내에서 id 속성 값을 지정
<p id='p1'>안녕하세요.</p>
<p id='p2'>반갑습니다.</p>
- css 태그 에서 태그의 id 값을 사용 (.)
<style>
.p1 {
font-family: '돋움';
}
</style>
class(클래스) 선택자
- 웹 페이지에서 두 군데 이상 존재하는 영역 선택
- html 태그 내에서 class속성 값을 지정
<span class='green'>hello</span>
- class 속성 값을 공백으로 여러개 지정 가능
<span class='green blue red'>hello</span>
// 속성값이 여러개 있다면 제일 마지막에 지정한 red로 css값 적용
- css태그 에서 태그의 class 값을 사용 (#)
<style>
#p1 {
font-family: '돋움';
}
</style>
- css태그에서 id 값과 class 값을 동시에 사용
// 컴마 (,) 으로 구분
<style>
.p1, #p1 {
font-family: '돋움';
}
</style>
CSS의 자손(후손) 선택자
- 자식을 포함해서 후손까지 모두 선택
// 공백으로 구분
#my_ul li {
padding: 5px;
border-bottom: 2px;
}
CSS의 자식 선택자
- 오로지 '자식'만 선택
// '>' 기호로 사용
#my_ul > li {
padding: 5px;
border-bottom: 2px;
}
박스 모델 - ppt 7장
박스모델의 개념
- 박스의 속성
- content : 실제 내용이 표현되는 곳
- padding : 콘텐츠와 테두리 사이의 여백
- border : 박스의 테두리 두께
- margin : 테두리와 박스의 최종 경계 사이의 여백
- CSS style 태그 내의 body 태그 선택
<style>
body {
font-family: '돋움';
}
</style>
- html 태그 내에서 id 속성 값을 지정
<p id='p1'>안녕하세요.</p>
<p id='p2'>반갑습니다.</p>
- css 태그 에서 태그의 id 값을 사용 (.)
<style>
.p1 {
font-family: '돋움';
}
</style>
- html 태그 내에서 class속성 값을 지정
<span class='green'>hello</span>
- class 속성 값을 공백으로 여러개 지정 가능
<span class='green blue red'>hello</span>
// 속성값이 여러개 있다면 제일 마지막에 지정한 red로 css값 적용
- css태그 에서 태그의 class 값을 사용 (#)
<style>
#p1 {
font-family: '돋움';
}
</style>
- css태그에서 id 값과 class 값을 동시에 사용
// 컴마 (,) 으로 구분
<style>
.p1, #p1 {
font-family: '돋움';
}
</style>
- 자식을 포함해서 후손까지 모두 선택
// 공백으로 구분
#my_ul li {
padding: 5px;
border-bottom: 2px;
}
- 오로지 '자식'만 선택
// '>' 기호로 사용
#my_ul > li {
padding: 5px;
border-bottom: 2px;
}
박스모델의 개념
- 박스의 속성
- content : 실제 내용이 표현되는 곳
- padding : 콘텐츠와 테두리 사이의 여백
- border : 박스의 테두리 두께
- margin : 테두리와 박스의 최종 경계 사이의 여백
박스 모델(Box Model)의 구성요소
- 박스 형태로 된 모든 HTML 요소
- CSS style 내의 경계선(border) 그리고 마진(margin)과 패딩(padding) 지정 가능
h3 { border: solid 5px blue; padding: 20px; margin: 30px; }
HTML tag는 크게 2가지 종류로 구분 :
- 1) Block-Level Element (= Tag)
- Block-Level Element는 화면 상의 한 라인에 하나만 위치할 수 있다.
- 즉, 세로로 박스가 쌓임
- 2) Inline-Level Element (= Tag)
- Inline-Level Element는 한 라인에 복수로 여러개 위치할 수 있다.
- 즉, 가로로 박스가 나열됨
Author And Source
이 문제에 관하여(HTML/CSS - 0705), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jsung12/0705-HTMLCSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)