CSS에서 색상 표현하는 방법
색이름으로 표현하기
16진수 표기법으로 표현하기
16진수 표기법으로 표현하기-2-
무채색으로 표현하기
박스모델
- 모든 HTML 엘리먼트(태그) 박스처럼 다루어진다
- 화면 디자인, 화면의 레이아웃을 구성할 때 HTML 엘리먼트(태그)를 박스처럼 다루게 되는데, 이를 박스모델이라고 한다
박스모델의 구성
HTML의 모든 엘리먼트(태그)는 margin, border, padding, content로 구성된다
| margin | 테두리(border)의 바깥여백, 다른 엘리먼트와의 경계 |
| border | 엘리먼트의 테두리, padding과 contents를 감싸고 있다 |
| padding | 테두리(border)와 contents 사이의 여백, contents를 감싸고 있다 |
| contents | 박스모델이 가지는 실제 내용(텍스트 혹은 이미지) |
박스모델에서 엘리먼트의 실제 너비와 높이
- box-sizing이 content-box인 경우 : css에서 정의한 width가 contents의 너비로 정의된다
디폴트너비 = leftmargin + leftborder + leftpadding + content(width) + rightpadding + rightborder + rightmargin
- box-sizing이 border-box인 경우 : css에서 정의한 width가 border와 padding, content의 너비를 합한 것으로 정의된다
너비 = leftmargin + width + rightmargin
CSS Position
- 포지션 속성은 엘리먼트의 위치를 결정한다
Position 속성의 종류
| static | position 속성을 정의하지 않았을 때 기본값으로 설정되어 있는 값 왼쪽에서 오른쪽으로, 위에서 아래로 엘리먼트가 배치되는 것 |
| relative | static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 지정된 픽셀만큼 엘리먼의 위치를 이동시킬 수 있다 |
| absolute | 부모엘리먼트의 position 설정이 relative, fixed, absolute로 설정되어 있을 때(부모엘리먼트가 static 속성이 아닌 경우)부모를 기준으로 엘리먼트의 위치를 이동시킨다 |
| fixed | 엘리먼트의 위치를 고정시킨다 내비게이션, 좌측 메뉴, 우측의 퀵메뉴 배너광고 등 고정시킬 때 사용한다 |
CSS Layout
float 속성
- 부모엘리먼트 내의 특정 엘리먼트를 왼쪽 혹은 오른쪽으로 떠 있게 하는 것이다
- 엘리먼트가 floating되면 다른 엘리먼트는 floating된 엘리먼트 아래로 들어오게 된다
- floating된 엘리먼트 아래로 들어온 엘리먼트의 컨텐츠는 floating된 엘리먼트를 피해서 화면에 표시된다
overflow 속성
- floating된 엘리먼트의 높이가 원래 그 엘리먼트 포함하고 있던 부모 엘리먼트의 높이보다 크면, 부모엘리먼트 밖으로 벗어나게 된다
- 부모 엘리먼트에 overflow : auto 속성을 추가하면, 부모엘리먼트 밖으로 벗어나는 문제를 해결할 수 있다
clear 속성
- 특정 엘리먼트의 옆쪽에 floating된 엘리먼트가 위치하지 못하게 하는 것이다
float 예시
<head>
<style>
img{
float:right;
margin-right: 10px;
}
p{
border: 1px solid red;
}
.box{
color: white;
font-weight: bold;
font-size: 50px;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
}
#box-1, #box-2, #box-3, #box-4 {
float: left;
}
#box-3, #box-4 {
float: right;
}
#box-1{
background-color: red;
}
#box-2{
background-color: orange;
}
#box-3{
background-color: blue;
}
#box-4{
background-color: magenta;
}
</style>
</head>
<body>
<h1>float</h1>
<h2>요소를 float 시키기</h2>
<div>
<img src="images/GettyImages-1774896643.jpg" alt="" width="150px" height="100px">
<p>독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
독일 분데스리가가 인정한 '괴물' 수비수다웠다. 김민재(27)가 강한 피지컬로 상대 공격수를 제압하며 팀의 3연승에 일조했다.
</p>
</div>
<h2>float로 요소를 정렬시키기</h2>
<div class="container">
<div class="box" id="box-1">1</div>
<div class="box" id="box-2">2</div>
<div class="box" id="box-3">3</div>
<div class="box" id="box-4">4</div>
</div>
</body>
img 태그에 float 속성을 주고 오른쪽 정렬을 시켜서 사진이 오른쪽에 나오고 글자가 사진을 넘어가지 않고 밑에 줄로 넘어가는 것을 확인할 수 있다
float 속성으로 인해 공중으로 뜨더라도 다른 엘리먼트들이 그 밑에 있지 못한다
<head>
<style>
.container{
color: white;
text-align: center;
padding: 10px;
background-color: yellow;
/* overflow: hidden; */
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1{
background-color: maroon;
}
.d2{
background-color: aqua;
}
.d3{
padding: 20px;
background-color: gainsboro;
text-align: center;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div class="d3">3</div>
</body>
style 태그안에 .clartfix::after 코드가 있는데
가상 요소 선택자라고 한다
추가된 가상요소는 컨텐츠 ""이고, display 속성은 블록이기 때문에 내용이 비어있는 블록요소가 하나 추가되는 것이다
clear: both는 추가된 가상요소의 왼쪽과 오른쪽에 floating 요소가 위치하지 못하게 한다
즉, 추가된 가상요소가 floating된 요소의 끝에 위치하게 된다
부모요소는 floating된 요소의 높이는 인지못해서 자신의 높이를 적절히 조절하지 못하지만 추가된 가상요소가 floating된 요소의 끝에 위치하고 있기 때문에 그 가상요소를 감싸기 충분한 높이로 저절로 높이가 조절된다
:: after 가상요소선택자
- 선택한 요소의 맨 마지막 자식으로 가상요소(가상태그)를 하나 생성한다
- 보통 content 속성과 함께 사용하며, 선택된 요소에 장식용 컨텐츠를 추가할때 사용
// 나를 위한 메모 //
layout 예시
<head>
<style>
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f3f4;
color: #58666e;
}
#wrap{
/* contents 영역이 header 영역과 겹쳐지지 않도록 header의 height만큼 */
margin-top: 60px;
}
header {
/* 헤더부를 상단에 고정시킨다 */
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 2000;
background-color: #fff;
/* box-show 효과를 추가한다. */
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
/*Navigation bar를 우측정렬한다.*/
nav {
float: right;
}
/*로그 이미지를 수직으로 중앙 정렬한다.*/
.logo {
/*a태그를 inline-block으로 변경해서 heigh와 margin을 지정할 수 있게 한다.*/
display: inline-block;
height: 36px;
margin: 12px 0 12px 25px;
}
.logo > img { height: 36px;}
.nav-items > li {
/*수직정렬되어 있는 Navigation bar를 수평 정렬한다.*/
display: inline-block;
}
/*글자의 자간을 Navigation bar의 높이와 동일하게 맟춰서 메뉴가 수직 중앙 정렬되게 한다.*/
.nav-items > li > a {
line-height: 60px;
padding: 0 30px;
color: rgba(0, 0, 0, 0.4);
}
/*링크에 마우스가 올라오면 텍스트 색이 변하게 한다.*/
.nav-items > li > a:hover {
color: rgba(0, 0, 0, 0.8);
}
li {
list-style: none;
}
a {
text-decoration: none;
}
#content-wrap::after{
content: "";
display: block;
clear: both;
}
aside{
/* aside영역(side bar)을 고정시킨다 */
position: fixed;
top: 60px;
bottom: 0px;
width: 200px;
padding-top: 25px;
background-color: #333;
}
aside > ul{
width: 200px;
}
aside > ul > li > a{
display: block;
counter-reset: #fff;
padding: 10px 0 10px 20px;
}
aside > ul > li > a.active{
background-color: #4caf50;
}
aside > ul > li > a:hover:not(.active){
background-color: #555;
}
aside > h1 {
color: #fff;
padding: 20px 0 20px 20px;
}
section{
float: right;
width: 80%;
}
article{
margin: 10px;
padding: 25px;
background-color: white;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<a class="logo" href="/home">
<img src="https://poiemaweb.com/img/logo.png" height="36px">
</a>
<nav>
<ul class="nav-items">
<li><a href="/home">Home</a></li>
<li><a href="/news">News</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<div id="content-wrap">
<!-- 컨텐츠에 대한 메뉴아이템이나 부가정보 영역은 aside다 -->
<aside>
<h1>Aside</h1>
<ul>
<li><a href="#" class="active">런던</a></li>
<li><a href="#" >파리</a></li>
<li><a href="#">도쿄</a></li>
<li><a href="#" >뉴욕</a></li>
</ul>
</aside>
<!-- section은 컨텐츠 영역이다. section영역은 더 구체적인 article로 구분된다 -->
<section>
<article id="london">
<h1>런던</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article id="paris">
<h1>파리</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article id="tokyo">
<h1>도쿄</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article id="newyork">
<h1>뉴욕</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
</section>
</div>
</div>
</body>
우측상단에 Home News Contact About 이 정렬되어 있는데 사진에선 안보이지만 마우스를 올려놓으면 글자 색상이 검정색으로 변한다
'HTML,CSS' 카테고리의 다른 글
| CSS_CSS, 선택자와 선택자 종류 (1) | 2023.12.27 |
|---|---|
| HTML_inline과 block, id와 class (0) | 2023.12.26 |
| HTML_태그의 종류(table,img) (0) | 2023.12.22 |
| HTML_태그의 종류 (h1~h6, p, a, ul~li~ol) (1) | 2023.12.21 |
| HTML_HTML과 HTML의 구조 및 구성 (0) | 2023.12.20 |
