css의 이점
- 웹페이지 유지보수 편리
- 가독성 증가
- html가 정보에 전념하도록 함
- css통해 디자인하는 것이 효율적
css를 삽입하는 방법
1. style 태그 이용
2. style 속성을 이용
여러개의 효과를 삽입하는 경우 ; 으로 구분한다.
1. style 태그
<style>
a {
color:red;
text-decoration: none;
}
</style>해당 html 코드에 있는 모든 a 태그에 대해 color를 red로 설정
디자인과 관련된 코드는 <style>코드 안에 갇혀있게 될 것이다.
a {} 라는 코드는 효과를 어느 태그에게 지정하는 것인지를 알려준다. 즉, 우리가 주고 싶은 효과를 누구에게 줄 것인지 선택한다는 점에서 선택자라고 한다.
color:black은 효과라고 하고 영어로는 declaration(선언)이라고 한다.
이 중 color는 속성(Property)이라고 하며 black은 속성의 값(value)이라고 한다.
text-decoration: none; 는 모든 a태그에 대한 장식을 없앤다.
2. style 속성
<li><a href="1.html"> HTML</a> </li>
<li><a href="2.html" style="color:blue; text-decoration:underline"> CSS</a> </li>
<li><a href="3.html"> JavaScript</a> </li>CSS에 대하여 style 속성을 이용해 색상을 blue로 설정
속성의 값을 브라우저는 css 문법에 따라 해석한다. 해석한 결과를 속성이 위치한 태그에 적용한다.
style= 은 html의 속성이다.
color:red는 속성의 값으로 css의 효과이다.
sytle 태그를 직접 사용한 경우는 태그가 위치한 태그에게 효과를 줄 것이기 때문에 선택자를 사용할 필요가 없다.
text-decoration:underline를 추가함으로서 css에만 밑줄 효과를 넣어줄 수 있다.
~ chap.혁명적 변화
선택자
HTML 속성 class= 를 사용하여 같은 그룹으로 묶을 수 있다.
.saw{
color:gray;
}
.active{
color:red;
}class가 saw인 모든 태그를 가르키는 선택자
class가 active인 모든 태그를 가르키는 선택자
<li><a href="1.html" class="saw"> HTML</a> </li>
<li><a href="2.html" class="saw active"> CSS</a> </li>이 2개가 회색으로 설정된다.
class의 값은 여러 개가 들어올 수 있고 구분은 띄어쓰기로 된다. 하나의 태그에는 여러 개의 속성이 들어올 수 있고 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
단, 이 방법은 좋은 것이 아니다.
CSS가 있는 태그는 2개의 class 영향을 받고 있다.
이 폰트의 색상은 왜 red로 설정됐는가? .saw가 .active보다 늦게 설정되어 있기 때문이다. 즉, 가장 최근에 설정된 class가 더 높은 우선순위를 갖는다. = 가장 마지막에 설정된 class 선택자
우선순위를 선택하기 위해서는 ? id 선택자를 사용한다.
#active{
color:red;
}
.saw{
color:gray;
} <li><a href="2.html" class="saw" id="active"> CSS</a> </li>id선택자(#active)와 class선택자(.saw)가 붙으면 id선택자가 우선순위가 높다.
* 클래스 선택자가 태그 선택자보다 우선순위가 높다.
왜 이런 우선순위를 갖는가? ( id선택자 > class선택자 > 태그선택자 )
id 선택자는 css에서 id선택자의 값이 active인 태그를 한 번 사용했기 때문에 그 다음엔 사용해선 안된다.
id의 값은 단 한 번만 사용할 수 있다는 뜻이다.
~ css선택자를 스스로 알아내는 방법
박스모델
h1의 태그는 화면 전체의 부피를 가지고 a태그는 자신의 크기만큼만의 부피를 가진다.
화면 전체의 부피를 가지는 태그를 block이라고 한다.
<style>
/*
block level tag(element)
*/
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
/*
inline tag(element)
*/
a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>단 block level, inline은 display 속성값의 기본값일뿐 css를 통해 언제든 기본값을 변경할 수 있다.
h1,a{
border: 5px solid red;
},를 통해 중복을 제거해줄 수 있다. 또한, border:를 통해서도 중복을 제거할 수 있다.
페이지도구(개발자도구)를 이용하여 css으로 적용된 style을 확인할 수 있다. 이를 통해 섬세한 작업이 가능하다.
단축키는 F12
그리드
div 태그는 아무런 의미 없이 디자인 용도로 사용하는 태그.
div는 block level element, span은 inline element
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style> <body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>NAVIGATION과 ARTICLE을 같은 부모를 갖도록 묶어주었다.
grid-template-columns: 150px 1fr; 은 NAVIGATION은 150px의 크기를, 그 나머지 크기를 ARTICLE이 갖는다는 의미이다.
만약 2fr 1fr이면 전체화면의 2:1이라는 의미임. 내용이 많아지면 자동으로 그 크기에 맞춰서 커진다.
#grid ol{
padding-left: 33px;
}부모가 grid인 ol태그만 해당되는 디자인
~Day1
'Web' 카테고리의 다른 글
| [Paging] 페이지네이션을 알고 사용하자 (0) | 2023.10.02 |
|---|---|
| [Web] 서블릿(Servlet)이란 (0) | 2022.08.05 |
| [부스트코스] 웹 프로그래밍(풀스택) - Day 1 (0) | 2022.04.06 |
| 생활코딩 JavaScript 정리 (0) | 2022.01.24 |
| 생활코딩 css 정리(Day 2) (0) | 2022.01.15 |
