css 인라인 ,블록요소 ,박스모델
css(cascading Style Sheets)
HTML로 만든 웹 문서의 스타일(디자인)을 담당한다
HTML에서 제공하는 속성으로 간단한 스타일을 지정할 수 있다
내용과 디자인 분리되어 있어야 유지보수에 유리하므로 CSS를 사용하는 것이 더 좋다
CSS 형식
속성1:속성값1;
속성2:속성값2;
스타일 적용하는 방법
1. 인라인 스타일
스타일에 적용시킬 태그에 style 속성을 사용한다
간단하게 사용할 수 있지만 코드가 길어질수록 가독성이 떨어지고 html, css가 같이
작성되므로 유지보수가 매우 힘들어진다
2. 내부 스타일
<head> 영역에 <style></style> 태그를 사용하여 각 요소들의 스타일을 정의한다
선택자 {
속성1: 속성값1;
속성2: 속성값2;
}
선택자 : 어떤 요소를 선택하기 위해 사용하는 것
1) id
특정태그에 식별가능한 고유한 값을 부여함
선택자로 사용 시 #id 로 사용한다
2) class
여러 태그를 하나의 집단으로 묶어줌
선택자로 사용 시 .class로 사용한다
3. 외부스타일
별도의 css파일 만들어 적용시킨다
css와 html을 완전히 분리하여 관리할 수 있기 때문에 가장 많이 사용하는 방식이다
css파일 html파일에 적용하기 위해서는 <head> 영역에 link 태그를 사용한다
<link rel ="stylesheet" href = "파일경로">
rel 속성에는 현재 페이지와의 관계를 의미
href 속성에는 적용시킬 css 파일의 경로를 작성한다
css의 박스 모델
웹 페이지의 레이아웃을 구성하는데 사용되는 중요한 개념
요소가 화면에 어떻게 배치되고 크기가 어떻게 결정되는지 작성
블록요소에 적용된다
1) 콘텐츠 영역(Content Area)
요소의 실제 내용을 포함하는 영역
2) 안팎 여백(Padding)
콘텐츠 영역과 테두리 사이의 공간을 나타냄
padding 속성을 사용하여 설정 가능
요소의 내용 주위에 추가 여백을 만듦
3) 테두리(Border)
요소의 주위를 둘러싸는 경계를 나타냄
border 속성을 사용하여 설정 가능
테두리의 스타일, 두께, 색상 등을 지정 가능
4) 여백(Margin)
여백은 요소와 주변 요소 사이의 공간을 나타냄
margin 속성을 사용하여 설정가능
요소와 주변 요소 사이의 간격을 지정 가능
+) 인라인 요소의 박스 모델도 margin, border, padding은 설정가능하지만
width, height를 사용할 수 없으므로 컨텐츠 영역의 크기를 설정할 수 없다
2. 박스 모델 css 속성
1) contents
width : 너비;
height : 높이;
- 단위는 기본적으로 px이며, 그외에도 여러단위가 있다
- 인라인 요소는 불가능하다
2) border
border : 굵기 모양 색상;
3) padding
padding: 4방향;
padding: 상하 좌우;
padding: 상 좌우 하;
padding: 상 우 하 좌; (시계방향)
4) margin
margin: 4방향;
margin: 상하 좌우;
margin: 상 좌우 하;
maring: 상 우 하 좌; (시계방향)
- auto를 사용하면 요소를 중앙하게 위치하게 할 수 있다
- 블록요소를 세로로 배치하게 되면 margin이 중첩된다(겹쳐진다)
20px의 마진을 가진 요소들이 세로로 배치되면 각 요소들은 상하 간격이 40px이 아닌 20px이다
3. display 속성
HTML에서 요소를 어떻게 표시할지를 결정한다
HTML의 요소들은 기본적으로 display의 속성값이 설정되어있다
블록요소 -> display: block
인라인요소 -> display: inline
사용한 블록요소를 인라인으로 변경하고 싶다면 display 속성에 값을 inline으로 변경하면 된다
display 속성의 기본 4가지 값
1) none
요소를 보이지 않게 설정한다
단순히 투명해지는 것이 아니라 아예 사라지게 되므로 공간을 차지하지 않는다
2) block
블록요소로 설정한다
블록요소는 기본적으로 가로 영역을 모두 차지한다
3) inline
인라인요소로 설정한다
인라인요소는 기본적으로 컨텐츠의 크기만큼만 영역을 차지한다
블록요소와 달리 컨텐츠 너비, 높이를 설정할 수 없다
4) inline-block
인라인 블록요소로 설정한다
인라인과 블록의 특징을 섞어놓은 요소이며, 인라인처럼 컨텐츠만큼의 영역을 차지하지만
블록처럼 컨텐츠의 너비, 높이를 변경할 수 있다
내부는 block요소, 외부는 inline 요소의 특징을 갖는다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일</title>
</head>
<body>
<h1>인라인 스타일</h1>
<p style="color: blue; font-size: 16px;" >이 문장은 파란색 글씨와 16px의 크기를 가진다</p>
</body>
</html>
-인라인 스타일로 css 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:blue;">style01</h1>
<p style="background-color: beige;"> [앵커]
통상 증시에서는 연초 특별한 호재가 없어도 낙관적인 전망이 반영되는 '1월 효과'가 나타나곤 하는데요.
올해는 우리 주식시장에서 자취를 감춰버렸습니다.
그 이유를 엄윤주 기자가 분석했습니다.</p>
<p style="background-color: gray; color: gold;">
[기자]
새해 들어 우리 증시는 첫날을 제외하고 줄곧 고전을 면치 못하고 있습니다.
코스피가 9거래일 만에 반등하긴 했지만, 보합 수준에 불과합니다.</p>
<span style="background-color: aqua; font-size: 25px; font-weight: bold;">
직접적인 요인으로 시장에서는 지난 9일 발표된 삼성전자의 지난해 4분기 실적 저조를 꼽습니다.
시장 전망치에 못 미치면서 반도체 기술주 중심으로 약세를 보인 결과라는 겁니다.
여기에 연말 배당을 노리고 유입된 기관 투자자들이 대규모로 매도 물량을 내놓으면서 지수를 끌어내리고 있습니다.</span>
</body>
</html>
-인라인 스타일로 지정, font-size,weight 등 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부스타일</title>
<style>
p{
color:red;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 문장은 빨간색 글자색과 18px의 글꼴을 가진다</p>
</body>
</html>
-내부 스타일로 css 지정 선택자가 아닌 태그로 css 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
p{
background-color: gray;
color: red;
}
h1{
color: gold;
}
*{/* *은 모든 요소를 선택함 */
font-size: 25px;
/* css 주석 */
}
</style>
<body>
<!--html 주석-->
<h1 >style01</h1>
<p > [앵커]
통상 증시에서는 연초 특별한 호재가 없어도 낙관적인 전망이 반영되는 '1월 효과'가 나타나곤 하는데요.
올해는 우리 주식시장에서 자취를 감춰버렸습니다.
그 이유를 엄윤주 기자가 분석했습니다.</p>
<p >
[기자]
새해 들어 우리 증시는 첫날을 제외하고 줄곧 고전을 면치 못하고 있습니다.
코스피가 9거래일 만에 반등하긴 했지만, 보합 수준에 불과합니다.</p>
<span >
직접적인 요인으로 시장에서는 지난 9일 발표된 삼성전자의 지난해 4분기 실적 저조를 꼽습니다.
시장 전망치에 못 미치면서 반도체 기술주 중심으로 약세를 보인 결과라는 겁니다.
여기에 연말 배당을 노리고 유입된 기관 투자자들이 대규모로 매도 물량을 내놓으면서 지수를 끌어내리고 있습니다.</span>
</body>
</body>
</html>
* 는 모든 요소에 스타일 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id class지정</title>
<style>
#id-test{
color: blue;
font-size: 25px;
font-weight: bold;
background-color: bisque;
}
.class-test{
color: darkblue;
font-size: 45px;
background-color: beige;
}
</style>
</head>
<body>
<h1>id 와 class</h1>
<span id="id-test">span 요소1</span>
<span>span 요소2</span>
<p class="class-test">p요소 1</p>
<p class="class-test">p요소 2</p>
<div>div 요소1</div>
<div>div 요소2</div>
</body>
</html>
#id 선택자와 .class 선택자 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부스타일</title>
<link rel="stylesheet" href="./../../css/day03/test06.css">
</head>
<body>
<p>이 문장은 style.css 에 정의된 style 을 따른다</p>
</body>
</html>
-외부 스타일 적용 href 에 상대경로로 링크추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록요소 확인</title>
<style>
div{
background-color: antiquewhite;
border: 1px solid black;
/*border 블록 요소의 테두릐를 지정
border : 굵기 행태 색상
형태 : solid(직선) ,dotted(점선), dashed(긴 점선)*/
width:100px;
height: 100px;
margin: 20px;
/*두 요소가 20px 씩의 여백을 가지면 40px 떨어지는게 아니라
20px 이 떨어진다 , 여백이 서로 겹친다. 마진 설정시 주의 */
padding:20px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
-블록 요소의 박스모델 css 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{ */
/* background-color: bisque;
border: 3px solid red;
width: 100px;
height: 100px; */
/* 마진을 왼쪽만 설정 */
/* margin-left: 50px;
margin-bottom: 20px; */
/* margin: 0 0 20px 50px; */
/* 시계방향으로 적용됨 */
/* padding: 20px 0 0 0; */
/* 숫자를 2개만 설정하면 상하, 좌우 의 여백 설정 */
/* margin: 20px 50px;
padding: 20px 10px; */
/* margin:auto; */
/*값을 조절해서 옮길수도 있지만 auto 값을 설정하면 좌우 여백을 동일하게 맞춰준다.
auto 는 화면 크기에 따라 알아서 중앙으로 유지하게 해준다. */
/* text-align: center; */
/* } */
div{
background-color: beige;
border: 3px solid red;
width: 100px;
height: 100px;
margin: 20px 50px;
padding: 20px 0 0 0;
border-radius: 20px;
/* 박스의 테두리를 바꿀수 있다. 정확히 원형으로 바꾸고 싶으면 px 단위가 아니라 %단위로 */
}
</style>
</head>
<body>
<!--div{컨텐츠 $}*10-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
-css box 속성 적용, margin:auto 는 박스를 좌우여백 동일하게 맞춰주고 text-align : center 은 박스안 텍스트를 좌우정렬해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display</title>
<style>
.sapn--inline {
background-color: blanchedalmond;
font-size: 20px;
margin: 10px;
padding: 10px;
border: 1px solid red;
/* width: ;
height: ;
인라인 요소는 컨텐츠 영역의 크기 조절이 불가하다.*/
line-height: 100px;
/* line-height 속성으로 줄 간격 조절 가능 */
letter-spacing: 100px;
/* letter-spacing 글자간 간격 조절 가능
word-spacing 으로 단어간 간격을 조절할 수 있다. */
}
.span--block{
display: block;
/* 요소가 블록 요소로 변경된다. */
background-color: gray;
color: white;
border: 1px solid blue;
font-size: 25px;
font-weight: bold;
width: 100px;
height: 100px;
/* 블록 요소는 컨텐츠 크기 조절이 가능 */
margin: 10px auto;
}
.div--inlineblock{
background-color: yellow;
border: 1px solid red;
display: inline-block;
/* 인라인 블럭 요소는 요소의 크기 만큼만 영역을 차지하여 인라인 요소처럼 옆에 다른 요소가 올 수 있음 */
width: 100px;
height: 100px;
/* 인라인 블록은 블록 요소처럼 컨텐츠 크기를 조절할 수 있다. */
margin: 10px auto;
/* 인라인 블록은 margin auto 를 이용한 중앙정력이 불가하다. */
}
.div--none{
background-color: aqua;
border: 1px solid red;
width: 100px;
height: 100px;
display: none;
/* none 을 주게 되면 요소가 사라진다. 단순히 안보이는게 아니라 차지하고 있던 영역까지 사라진다 */
}
</style>
</head>
<body>
<h1>display: inline</h1>
<span class="sapn--inline">span 1</span>
<span class="sapn--inline"> span 2</span>
<span class="sapn--inline">span 3</span>
<span class="sapn--inline">span 4</span>
<span class="sapn--inline">span 5</span>
<h1>display: block</h1>
<span class="span--block">span 1</span>
<span class="span--block">span 2</span>
<span class="span--block">span 3</span>
<span class="span--block">span 4</span>
<span class="span--block">span 5</span>
<h1>display: inlineblock</h1>
<!--div.클래스{div $-}*5-->
<div class="div--inlineblock">div 1</div>
<div class="div--inlineblock">div 2</div>
<div class="div--inlineblock">div 3</div>
<div class="div--inlineblock">div 4</div>
<div class="div--inlineblock">div 5</div>
<h1>display: none</h1>
<div class="div--none">div 1</div>
<div class="div--none">div 2</div>
<div class="div--none">div 3</div>
<div class="div--none">div 4</div>
<div class="div--none">div 5</div>
</body>
</html>
display 속성 연습
-인라인 속성 : 크기조절 불가능, 컨텐츠 크기가 박스크기, line-height = 줄높이 ,
-블록 속성 : 크기조절 가능
-인라인 블록 : 크기조절 가능, 옆에 다른 컨텐츠 올 수 있음 , margin: auto 사용해서 중앙정렬 불가
-none : 요소 사라짐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./../../css/day03/task01.css">
</head>
<body>
<h1>과일</h1>
<span>신선한 과일</span>
<span class="phon-num">연락처 010111111</span>
<a href="https://www.naver.com">네이버</a>
<hr>
<ul class="myList">
<li>사과</li>
<li>바나나</li>
<li>키위</li>
<li>배</li>
</ul>
<hr>
<div>사과는 20% 할인 바나나, 배는 10% 할인!!!</div>
<div>div 요소</div>
</body>
</html>
body{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
/* 폰트 변경하기 */
}
h1{
color: blue;
text-align: center;
}
span{
color: green;
/*text-align: right;*/
/* span 태그는 인라인 요소이다
인라인 요소의 크기는 컨텐츠 크기와 일치한다.
딱 맞는 칸에 들어간 요소가 정렬될 수 없다.
인라인 요소는 text-align이 불가하다.*/
}
div{
background-color: black;
text-align: right;
color: rgb(255,255,255);
/*색상을 변경할때는 단순히 색의 이름만 사용하는게 아니라 16진수나 rgb 값도 사용 가능하다
rgba(0,0 , 0, 0,) 은 투명도를 설정할 수 있다.
좌측에 네모 박스를 눌러 눈으로 복 선택도 가능하다. 크롬 웹스토어에서 collor Zilla 설치해서 사용할수도 있음*/
}
.phon-num{
font-size: 35px;
background-color:antiquewhite;
font-weight: bold;
}
.myList{
list-style-type: none;
/*list-style-type 속성은 리스트 앞에 표현하는 도형이나 숫자의 모양을 결정한다*/
}
-외부 스타일시트 연습
-font-family 로 font 변경 가능
-인라인 요소는 text-aline 불가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display 속성 실습</title>
<style>
.class--inline{
display: inline;
background-color: yellow;
border: 1px solid red;
}
.class--inlineblock{
display: inline-block;
background-color: green;
border: 2px dotted blue;
}
.class-block{
background-color: orange;
border: 3px double black;
}
.class-hidden{
display: none;
}
</style>
</head>
<body>
<h1>인라인요소</h1>
<div class="class--inline">inline</div>
<div class="class--inline">inline</div>
<div class="class--inline">inline</div>
<h1>인라인 블록요소</h1>
<div class="class--inlineblock">inline block</div>
<div class="class--inlineblock">inline block</div>
<div class="class--inlineblock">inline block</div>
<h1>블록요소</h1>
<div class="class-block">block </div>
<div class="class-block">block </div>
<div class="class-block">block </div>
<h1>숨김요소</h1>
<div class="class-hidden">hidden </div>
<div class="class-hidden">hidden </div>
<div class="class-hidden">hidden </div>
</body>
</html>

명시적으로 display 속성 보기 !
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>강아지 소개 페이지</title>
<style>
/* 전체 페이지 스타일 */
body {
font-family: Arial, sans-serif;
background-color: whitesmoke;
margin: 0;
padding: 0;
}
/* 페이지 제목 스타일 */
h1 {
text-align: center;
background-color: darkslategrey;
color: white;
padding: 20px;
margin: 0;
}
/* 강아지 정보 섹션 스타일 */
.dog-info {
text-align: center;
background-color: white;
width: 100%;
height: 80%;
padding:30px 0 0 0;
}
/* 강아지 이미지 스타일 */
.dog-image {
width: 300px;
height: 200px;
border: 3px solid black;
}
/* 연락 정보 섹션 스타일 */
.contact-info {
color: white;
background-color: brown;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<h1>강아지 소개 페이지</h1>
<div class="dog-info">
<h2>우리 강아지 이름: 루피</h2>
<p>나이: 2세</p>
<p>품종: 골든 리트리버</p>
<img class="dog-image" src="https://cdn.imweb.me/upload/S201910012ff964777e0e3/62f9a36ea3cea.jpg" alt="강아지 이미지">
<p>루피는 활발하고 친근한 성격의 강아지입니다. 누구나 좋아할 것입니다.</p>
</div>
<div class="contact-info">
<h2>문의 사항은 아래로 연락주세요</h2>
<p>Email: task@koreait.com</p>
<p>전화번호: 123-456-7890</p>
</div>
</body>
</html>

-css 적용연습