고정 헤더 영역
상세 컨텐츠
본문
반응형
웹 표준이 나오기 전에는
콘텐츠(html)와 디자인(css)이 합쳐져 있었다.
지금은 이 둘이 분리되어 있어서,
한쪽을 건드리지 않고 css만 입히는 게 가능해졌다.
html 마크업으로 구조를 세우고,
css로 디자인을 입히면
웹 문서 형태가 된다.
css zen garden이라는 사이트에 들어가면,
html 구조는 같고
css만 변경한 사례들을 확인 가능하다.
이지스퍼블리싱의 CSS 기초 및 주요 선택자 인강을 들었다.
p{ text-align: center; }
선택자란 어디에 적용될 지를 나타내는 것.
→p 태그에
text-align(가운데 정렬)속성을 적용하겠다
p {color: blue; font-size: 18px; }
→ 한 선택자 안에 여러 속성을 지정 가능하다.
세미콜론으로 구분만 해준다면 가능!
* Ctrl+/ (주석 단축키)를 사용해서,
스타일을 쓸 때는 옆에 설명을 달아놓는 게 좋다.
내부 스타일 시트란
웹문서 안에 바로 스타일 시트를 적용하는 것이다.
<head>태그 안에서 <style>태그를 작성해
위와 같이 적용 가능하다.
외부 스타일 시트란
링크로 가져와서 연결하는 것을 말한다.
href링크로 css파일을 가져오는 형식이다.
rel: 내가 링크하려는 파일이
어떤 역할인지 정의해주는 역할.
만약 style을 딱 한번만 특정부분에 쓸 거다라고 한다면,
굳이 위의 방식을 쓸 필요가 없다.
특정 부분에 <style>을 적용해서
원하는 속성을 바로 쓸 수 있는 방법도 있다.
그걸 '인라인 스타일'이라고 부른다.
내부 스타일 시트와 외부 스타일 시트는
특성에 따라서 쓸 수 있다.
다음의 메인 페이지 같은 경우 변동사항이 없는
고정된 형태이므로,
<head>태그를 분석해보면
전부 여기에 다 담아놓은 걸 알 수 있다.
→ 내부 스타일시트임 .
*html5부터는 <style> 태그만 써도 됨
(type 지정 안해도 됨)
다만 뉴스페이지 같은 경우에는 여러 링크의
집합체이므로,
href를 활용한 사례가 더 많다.
선택자는 '스타일'을
어디에 적용할지 표시하는 식별자 역할을 한다.
전체 선택자(universal selector)
모든 요소에 특정 스타일을 적용한다는 의미
*{} 그냥 쓰면 웹페이지 전체에 적용
p * {} : p요소의 모든 하위 요소에 적용한다는 의미
p {}
h1 {}
태그 선택자는 태그에 괄호를 써서
다음과 같이 적용하는 방식을 말한다.
클래스 선택자: 여러 번 쓸 수 있다. 점으로 호출한다.
.redtext{}
ID 선택자: 문서 안에서 한 번만 쓸 수 있다. #으로 호출한다.
#container{}
id선택자를 여러 번써도 적용이 되긴 하지만,
웹 표준에는 맞지 않는다.
*여러번 쓸 때는 클래스 선택자를 써주자.
클래스 선택자를 부분 적용하고 싶으면,
위와 같은 방식으로 태그 옆에 적용할 수 있다.
1. p태그 전부에 사이즈를 지정해놓고,
클래스(class)선택자로 .bluetext 명령어로
2. 글자색을 원하는 부분에만 지정한다.
<p>동해물과 백두산이 <span class="redtext"> 안녕하세요. 대한민국입니다.</p>
id 선택자는 원하는 부분에 id="container"로 속성을 지정해주고,
<style>에 #container로, 정해준다.
선택자를 그루핑해주는 그룹 선택자도 있다.
같은 기능이 있는 selector는
위와 같은 형식으로 묶을 수 있다.
h1,h2{
text-align:center;
}
이런 식으로 표현이 가능하다.
소스가 여러 줄이 되니까, 복잡해지고
파일이 커지니까 고안해낸 방법이다.
반응형
'IT 공부 > 프론트엔드(Front-end)' 카테고리의 다른 글
| CSS 연결선택자 (h1+p, h1~p, [속성~=값]) 총정리 (0) | 2021.07.06 |
|---|---|
| 캐스캐이딩 스타일 시트로 css의 우선순위 이해하기 (0) | 2021.06.25 |
| [html] form 태그의 속성, <fieldset>,<legend> 태그_정리 (0) | 2021.06.02 |
| [html] <input>태그의 type속성 완전 정리!_복습4 (0) | 2021.05.14 |
| <html> form태그에 대한 정리_복습 3 (0) | 2021.05.14 |
댓글 영역