티스토리 뷰
01. Selector
style 태그에서 각각의 속성 값을 지정하고 싶은 경우 selector를 이용한다.
selector는 크게 3가지가 있으며 다음과 같다.
- tag ex. <h1></h1>, <p></p>
- class ( 이름 지정 가능)
- id ( 이름 지정 가능)
selector에 따라서 CSS의 속성을 적용하는 범위가 다르며, 아래로 갈수록 범위가 구체적으로 좁혀진다.
- Selector 적용 우선순위: id > class > tag
- 하나의 태그 안에서 동일한 property에 selector가 2개 이상 설정되어 있어 충돌하는 경우 나중에 (style 태그에서 더 아래에) 작성된 selector가 우선한다. ex.
<!--예시 - 아래의 경우 active가 우선한다.-->
<head>
<style>
.wrap {
color: blue;
}
.active {
color: grey;
}
</style>
</head>
<body>
<p class="wrap active">안녕하세요.</p>
<p class="wrap">제 이름은 정주혜입니다.</p>
</body>
HTML 태그 중에는 페이지 전체를 구역으로 가지는 태그와 자신의 컨텐츠 만큼만 구역으로 가지는 태그들이 있으며,
페이지 전체를 구역으로 가지는 태그를 block level element,
자신의 컨텐츠 만큼만 구역으로 가지는 태그를 inline element 라고 한다.
대표적인 태그는 아래와 같다
- 페이지 전체를 자신의 구역으로 가지는 태그: <h></h>, <div></div>
- 자신의 컨텐츠 만큼만 구역으로 가지는 태그: <a></a>, <span></span>
각 태그의 기본값이 block level 또는 inline 이라고 하더라도 CSS의 display 속성을 통하여 변경할 수 있다.
/* block level element 를 inline 으로 변경 */
<style>
h1 {
display: inline;
}
</style>
/* inline element를 block level 로 변경 */
<style>
a {
display: block;
}
</style>
02. Grid
Grid 로 레이아웃을 만드는 방법
- Grid 로 구역을 나눌 큰 레이아웃을 Column 기준으로 div 태그로 묶은 후 id 값을 지정한다.
- style 태그에서 위에서 지정한 id 값으로 display 속성을 grid로 준 후 세부 간격을 조절한다.
#grid {
display: grid;
grid-template-columns: 250px 1fr;
}여기서 grid-template-columns 속성은 grid 부모 div 태그 안의 열의 갯수 만큼 지정해야 한다.
아래는 전체 페이지의 폭을 id 값으로 준 후 <ol> 태그와 동영상을 삽입한 <div> 태그의 두 개의 열로 구역을 나눈 것이다.
<body>
<h1><a class="head1" href="index.html">Time to Wander</a></h1>
<div id="grid">
<ol>
<li><a href="profile.html">Profile</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="https://github.com/zubetcha" target="_blank">Github</a></li>
<li><a href="https://zubetcha.tistory.com/" target="_blank">Blog</a></li>
<li><a href="https://zuhye.notion.site/what-i-learned-08af94d8cf2a41eabea4e3de6c3a2cec" target="_blank">Notion</a></li>
<li><a href="">Youtube</a></li>
<div class="colorbtn">
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
">
</div>
</ol>
<div>
<p align="middle">
<iframe class="youtube" width="700" height="400" src="https://www.youtube.com/embed/7T7r_oSp0SE"
style="margin-top:30px"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</p>
<div class="wrap">
</div>
</div>
</div>
</body>
fr 란? 유연한 크기를 갖는 단위
/* fr 예시 */
## 열이 2개인 경우
#grid {
display: grid;
grid-template-columns: 250px 1fr;
}
첫 번째 열은 250px 만큼의 폭을 가지며, 두 번째 열은 나머지 공간을 페이지 크기에 따라서 유연하게 가짐
## 열이 4개인 경우
#grid {
display: grid;
grid-template-columns: auto 100px 1fr 2fr;
}
첫 번째 열은 해당 element의 내부 콘텐츠에 맞게 사이즈를 자동으로 조정
두 번째 열은 100px 만큼의 폭을 차지
세 번째 열은 남은 자유 공간의 1/3(총fr) 만큼의 폭 차지
네 번째 열은 남은 자유 공간의 2/3(총fr) 만큼의 폭 차지
03. CSS 파일 별도 관리
여러 html에 공통으로 적용하는 style 태그 속성들은 별도의 CSS 파일로 분리하여 관리하며 적용할 수 있다.
- 폴더 안에 CSS 파일 생성
- 공통으로 적용하고자 하는 속성들은 <style></style> 태그를 제외하고 복사하여 CSS 파일에 붙여넣기
- head 안에 link 태그를 이용하여 CSS 파일 적용
<link rel="stylesheet" href="style.css">'HTML & CSS' 카테고리의 다른 글
| [CSS] 반응형 웹 - Media Query (0) | 2021.10.24 |
|---|