- Today
- Total
Salangdung_i의 기록
CSS 기초 본문
HTML로 스타일로 작업을 하지 않고 따로 스타일을 사용하는 이유는?
- 웹 문서의 내용과 상관없이 디자인만 바꿀수 있다.
- HTML - 웹 문서의 내용을 담당
- CSS - 웹 문서의 디자인을 담당
CSS 기초
- <style> - 스타일 시트를 정의하는 태그
- * { 속성 } - 문서 전체에 스타일을 적용하는 전체 선택자
- 태그 { 속성 } - 태그에 스타일을 적용하는 태그 선택자
- .스타일 이름 { 속성 } - class 속성으로 묶은 특정 부분에만 스타일을 적용하는 클래스 선택자
- # 스타일 이름 { 속성 } - id 속성으로 묶은 부분에만 스타일을 적용하는 Id 선택자
- 이름1, 이름2, .. { 속성 } - 여러 항목에 같은 스타일을 적용하는 그룹 선택자
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="utf-8"> <title>할로윈(halloween)</title> <style> h2 { color: red; } p { font-size: 12px; margin-left: 20px; } h2.halloween { color: blue; } .redtext { color:red; } #container { background: #ff7f00; /* 배경색 */ width: 400px; /*너비*/ height: 200px; /*높이*/ margin: 0 auto; /*가로로 중앙에 배치*/ } </style> </head> <body> <div id="container"> </div> <h1>할로윈</h1> <h2 class="halloween">할로윈, 또는 핼러윈<span class="redtext">(영어: Halloween, Hallowe'en 또는 All Saints' Eve)</span></h2> <p class="halloween">모든 성인의 날 전 날인 10월 31일 밤을 기념하여 행해지는 영미권의 전통 행사다.</p> <p> 영미권에서 공휴일이 아니며 상업적인 성격을 많이 띤다. 이 날에는 죽은 영혼들이 되살아나며 정령이나 마녀 등이 출몰한다고 믿고, 귀신들에게 육신을 뺏기지 않기 위해 사람들은 유령이나 흡혈귀, 해골, 마녀, 괴물 등의 복장을 하고 축제를 즐긴다. 최근에는 대한민국과 일본에서도 모든 성인의 날 앞 주말에 주요 거리를 중심으로 젊은이들이 코스프레를 하고 모이는 현상이 늘어나고 있다. <h2>할로윈 활동</h2> <p>이날 밤에는 호박을 도려내고 안에 초 세운 다음 <span class="redtext">Jack-o'-lantern(잭오랜턴, 호박 유령얼굴 등불)</span>을 만든다. 또 유령, 마녀, 괴물 등을 가장한 애들이 집집마다 돌며 <span class="redtext">'Trick or treat!'</span> (맛있는 걸 주지 않으면, 장난칠 거야)라고 말한 뒤, 사탕을 주지 않으면 비누 등으로 유리창에 낙서 한다. 하지만 대부분의 어른들은 애들에게 사탕 나눠주는 것을 흔쾌히 여기며 미리 준비해 놓기 때문에 그 같은 일들은 그다지 발생하지 않는다. 이런 놀이 이후 아이들이 모여 받은 사탕을 가지고 파티를 열기도 한다. 이때 물을 채운 대야에 사과 넣고 손대지 않고 입으로 사과를 건지는 놀이를 한다. 하지만 현재는 위생 상의 문제로 잘 하지 않는다.</p> </body> </html>
캐스캐이딩(Cascading) 의미
css에서 'c'는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다. 위에서 아래로 흐른다는 '캐스캐이딩'은 선택자에 적용된 많은 스타일 중에서 어떤 스타일을 나타낼지를 결정함을 뜻한다.
만약 스타일이 동시에 적용된다면 텍스트 글자는 어떤 스타일의 규칙을 따라야 할까. 이때 스타일간의 충돌을 막기 위한 방법이 '위에서 아래로 흐르며 적용되는 벙법'이다. 이 방법에는 두가지 원칙이 있다.
- 1. 스타일의 우선운위 - 스타일 규칙의 중요도, 적용범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.
- 2. 스타일 상속 - 태그들의 포함관계에 따라 부모요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
'스타일 우선순위'
- 사용자 스타일 시트가 최우선
- 중요 스타일 !important
- 기본적인 브라우저 스타일 시트
- 인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일
CSS3?
CSS가 스타일 시트의 기본이 되면서 CSS1을 거쳐 CSS3까지 개발이 되었다. CSS3는 이전 CSS2, CSS1보다 정교하고 화려한 화면을 구성할수 있고 애니메이션까지 지원한다. 배경이나 글꼴, 박스 모델 등 수십개 시능을 주제별로 교육을 따로 만들었다. 이것을 'CSS모듈'이라고 한다.
https://www.w3.org/Style/CSS/
Cascading Style Sheets
Software Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don't need more than a text editor, but there are many tools available that make it even easier. Of course, all software has bugs, even after several
www.w3.org
참고 서적
http://m.yes24.com/Goods/Detail/85112155?pid=157529
Do it! HTML5+CSS3 웹 표준의 정석 - YES24
7년 연속 웹 분야 1위시간이 흘러도 흔들리지 않는 웹 기본기를 쌓고 싶다면 역시 정석으로 배워야 한다7년 연속 웹 분야 1위를 굳건히 지키고 있는 『Do it! HTML5+CSS3 웹 표준의
m.yes24.com
(Do it! HTML5+CSS3 웹표준의 정석, 이지스퍼블리징(주), 2017)을 학습하고 개인 학습용으로 정리한 내용입니다.
'WEB FRONT END > HTML5+CSS' 카테고리의 다른 글
| CSS variables (0) | 2021.11.12 |
|---|---|
| CSS 텍스트 관련 스타일 (0) | 2021.11.01 |
| HTML 멀티미디어 태그 (0) | 2021.10.29 |
| HTML5 시멘틱태그 (0) | 2021.10.28 |
| HTML 폼 태그 (0) | 2021.10.28 |
