레벨 요소
인라인레벨요소
- img, a , span, strong
주로 내용부분 즉 화면에 표시한 콘텐츠들
한줄에 여러개가 정렬.
자신만 크기를 인식하여 표시함
width, height를 적용하여 사용할 수 없다.
블록레벨요소
- div, p, ul, li, h1~h6,...
기본적으로 세로정렬
한줄에는 하나 차지합니다 즉 가로쪽을 자신이 100% 인식함
width, height를 적용하여 사용합니다.
display: 화면 보여주는 방식
display: none; 화면에서 숨김
display: block; 블록레벨요소로 만듦 (화면에 보여줌)
display: inline; 인라인레벨로 만듦
display: inline-block; 인라인레벨이면서 가로값과 세로값이 적용됨<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body * {
border: 1px solid #f00;
}
img {
display: block;
width: 100px;
height: 100px;
}
div {
display: inline;
}
p {
display: inline-block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="" alt="이미지" />
<img src="" alt="이미지" />
<img src="" alt="이미지" />
<img src="" alt="이미지" />
<br><br>
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
<br><br>
<span>span</span><span>span</span><span>span</span>
<br><br><br><br><br><br>
<div>div</div>
<div>div</div>
<div>div</div>
<br><br>
<p>문단태그입니다</p>
<p>문단태그입니다</p>
<p>문단태그입니다</p>
<br><br>
<ul>
<li>list</li>
<li>list</li>
</ul>
<ul>
<li>list</li>
<li>list</li>
</ul>
</body>
</html>이렇게 태그들은 인라인과 블록 레벨 이라는 default가 주어지는데 자유자재로 원하는대로 배치해주기 위해서 display 를 사용한다.
요소의 배치 - 상대적
<style>
body {
margin: 0;
padding: 0;
}
.box1 {
/* margin: 100px; */
/* margin-top: 100px;
margin-right: 20px;
margin-bottom: 50px;
margin-left: 70px; */
/*margin: 50px 100px; 세로 가로 */
/* margin: 50px 100px 50px; 상 좌우 하 */
/* margin: 10px 30px 50px 100px;
위쪽 오른쪽 아래쪽 왼쪽 */
width: 100px;
height: 100px;
border: 1px solid #000;
}
.box2 {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
padding: 10px;
box-sizing: border-box;
/*여백, 보드값을 현재 박스의 가로/세로 크기 안에 포함*/
/* padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding: 10px 20px 50px;
padding: 10px 20px 30px 40px; */
}
.box3 {
clear: both;
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
}
/* 4개의 border를 한꺼번에 스타일 선언
border: 1px solid #000;
border: 1px dotted #000;
border: 1px dash #000;
border: 1px double #000; */
/* 한방향의 선을 일괄적으로 스타일 선언
border-top: 5px solid #000;
border-right: 5px dotted #000;
border-bottom: 5px dashed #000;
border-left: 5px double #000; */
/* 각각방향에서 선두께, 선모양, 선색
border-top-width: 5px;
border-top-style: solid;
border-top-color: red; */
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
박스를 원하는 곳에 배치하는 방법을 배웠는데, 솔직히 이건 따라가면서도 너무 어려워서 이해를 잘 못해서 개인적으로 공부해야했다.
공부가 끝나고 나면 이 부분은 다시 정리해서 올릴 예정 !
하지만 오늘 알게 된 건, 배치에는 굉장히 다양한 태그를 쓸 수 있다는 것.
요소의 배치 - 절대적
<style>
body {
margin: 0;
padding: 0;
height: 3000px;
}
.box0 {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.box1 {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: violet
}
.box2 {
position: relative;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
border: 1px solid #000;
padding: 10px;
box-sizing: border-box;
}
.box3 {
position: fixed;
top: 100px;
right: 10px;
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box0">box0</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<!--
position: 요소(태그)를 내가 원하는 위치에 배치
top, right, bottom, left (기본은 top, left를 사용)
position: absolute; 절대값으로 배치
position: relative; 상대값으로 배치
position: fixed; 원하는 위치에 고정하여 배치
position: static; 문서의 흐름에 맞춰서 배치
-->
</body>배치는 상대적인데 position: absolute; 를 사용하면 화면을 어떻게 이동하든간에 같은 자리에 요소가 배치된다.
저번에 내 프로젝트에서 메뉴 navigation을 화면의 어디에 있든 상단에 배치되어 볼 수 있게 하고 싶다고 했었는데, 그 때 이걸 활용하면 된다 !
이렇게 CSS 기본을 배우는 와중에 내 프로젝트에 쓸 만한 걸 배울 땐 눈이 더 번쩍 떠진다 ㅎㅎ
HTML과 CSS를 사용해 웹페이지의 상단은 어떻게 구현하는걸까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 기본스타일 */
* {
margin: 0;
padding: 0;
}
img {
border: 0
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #000
}
/* a:link {
text-decoration: none;
color: #555;
}
a:hover {
text-decoration: underline;
color: red;
}
a:active {
text-decoration: underline;
color: violet;
}
a:visited {
text-decoration: none;
color: #555;
} */
*wrap {
width: 100%;
}
/* 상단영역 */
#header {
width: 100%;
height: 220px;
background-color: yellowgreen;
}
#header_top {
margin: 0 auto;
/* 자신의 크기가 이미 설정되어 있어야함 */
width: 1400px;
height: 160px;
background-color: antiquewhite;
}
#header_top .icon {
float: left;
width: 300px;
height: 160px;
background-color: violet;
}
#header_top .logo {
float: left;
margin-left: ;
width: 160px;
height: 160px;
background-color: rgb(179, 211, 170);
}
#header_top .group {
float: right;
width: 350px;
height: 160px;
background-color: #ccc;
}
#header_top .info_mn {
float: left;
margin: 15px 0 0 130px;
width: 220px;
height: 50px;
background-color: rgb(109, 0, 109);
}
#header_top .search {
float: left;
margin-top: 30px;
width: 350px;
height: 45px;
background-color: rgb(189, 96, 189);
}
#header_nav {
width:
height:
}
/* 메인 이미지 영역 */
/* 내용 영역 */
/* 하단 영역 */
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header_top">
<div class="icon">icon</div>
<div class="logo">logo</div>
<div class="group">
<div class="info_mn">info_mn</div>
<div class="search">search</div>
</div>
</div>
</div>
<div id="header_nav"></div>
</div>
<div id="mainImg"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
</body>
</html>사실 배우면서도 "그래서! 이걸로 우리가 평소에 보는 그 웹사이트를 어떻게 만드는건데?!?!" 라는 생각을 많이 했었는데
오늘 이걸 보면서, 아 이렇게 프레임을 잡는거구나 !!! 했다 ㅎㅎ
와이어프레임을 잡는 법을 배웠는데 간단히 상단만 잡아도 146줄의 코드가 나왔다..와우.....!
CSS는 쉽지않다~!가 여전히 내 결론이지만,
이젠 이게 어떻게 웹사이트의 틀을 잡을 수 있는지 이해가 됐다.
우리가 쉽게 쓰는 웹사이트들은 이면에 다 이런 수많은 코드들로 형성되어졌구나 ! 하는 신기함?ㅎㅎ 뭔가 그 속에 들어가게 된 것만 같아서 특별하다.
평소에 굉장히 T 같은 나인데,
왠지모르게 개발에 대해서만 F 인거같다.
자꾸 F 적인 감상이 떠오른다. 감격 이랄까?!
주말동안 CSS 더욱 공부해서 찾아오겠다 !
외워야할 것들을 강사님이 카페에 올려주셨다.
기억력 하나는 자신있는데 ! 이번 주말 목표는 이거 외우기 :) ㅎㅇㅌ
+++담주 수-목요일까지 xd 서브 페이지들을 완료해야해서, 오늘부터 수업 끝나고 남아서 서브 페이지 1개씩 완성해야한다 ! 조오오오아 가즈아 !!
손체리