float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습
[ float 속성을 활용한 레이아웃 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_float속성을 활용한 레이아웃_selfEX</title>
</head>
<style>
*{margin: 0;
padding: 0;"
.center{
width:80%;
border: 5px solid gray;
overflow: hidden;
margin:0 auto;
padding: 5px;
}
.left,.right{
width: 100px;
height: 100px;
border: 1px solid gray;
}
.left{
float:left;
}
.right{
float:right;
}
.center>.first,.center>.second{
margint-right: 5px;
}
</style>
<body>
<div class="center">
<div class="left first">first</div>
<div class="left">second</div>
</div>
<div class="center">
<div class="right">first</div>
<div class="right second">second</div>
</div>
</body>
</html>
[ float를 활용한 이미지 배치 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_float를 활용한 이미지 배치_selfEX</title>
</head>
<style>
*{margin: 0;
padding: 0;
}
.first img{
float:left;
margin-right:10px;
}
.second img{
float:right;
margin-left:10px;
}
.box{
border:5px solid gray;
overflow:hidden;
margin:10px;
height:300px;
padding:10px;
text-align: justify;
}
.box.second{
height: 700px;
}
mark,p{
display:block;
clear:both;
}
</style>
<body>
<div class="box first">
<img src="img/miki_01.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem, mollitia!
Iusto assumenda non eos ex ut illo, eaque quots sit neque odit molestiae aliquam dignissimos
libero amet placeat, dolor sequi hic ad illum possimus reiciendis, laboriosam dolores
esse repellat! Repudiandae est molestias maiores enim, debitis illo iste adipisci porro.
</div>
<div class="box second">
<img src="img/miki_01.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem, mollitia!
Iusto assumenda non eos ex ut illo, eaque quots sit neque odit molestiae aliquam dignissimos
libero amet placeat, dolor sequi hic ad illum possimus reiciendis, laboriosam dolores
esse repellat! Repudiandae est molestias maiores enim, debitis illo iste adipisci porro.
<mark>자식요소에 float를 설정했을 때, 잊지않고 부모요소에 overflow:hidden을 준다! 만약에 스크롤을
이용하여 숨겨져 있는 컨텐츠를 보고싶다면 overflow:scroll를 줄 수도 있다.</mark>
<p>더이상 흘러서 float속성 옆으로 붙고 싶지 않아요!!!</p>
</div>
</body>
</html>
# text-align: justify
균등하게 배치:)
.box.second 띄어쓰기 안하면, 클레스가 box이면서 second인 애를 선택하겟다는 의미입니다!
# p태그는 블럭요소~
mark태그는 인라인요소.
# clearboth를 선언했는데 mark는 인라인요소라서 그냥 텍스트옆에 붙고있는것이다. 그래서 mark를 블럭요소로 만들어줘야 하는데 이때 display속성으로 clearboth를 먹히게 할수있다!><
# display:전시하다.배치하다.진열하다.진열장;
> display 속성은 float속성과 함께 요소의 위치를 설정하기 위한 속성이다. 단, after-box 클래스에 clear속성을 줄 필요가 없다.
> 사실 왼쪽이나 오른쪽으로 배치하고싶을때 float속성을 쓸 것인가 인라인 블럭요소를 쓸것인가의 차이이다.
[ display 속성 ]
# none
# block
# inline
# inline-block
none :
태그가 보이지 않는다.
visibility 속성을 hidden으로 설정한 것과 달리, 영역을 차지 하지 않는다.
inline :
<span>, <b>, <i>, <mark>태그 등이 이에 해당된다.
block 과 달리 줄 바꿈이 되지 않으며, width와 height를 지정할 수 없다.
block :
<div>, <p> 태그 등이 해당된다.
가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈 되어 보인다.
width, height 속성을 지정할 수 있으며, 레이아웃 배치시 주로 쓰인다.
inline-block :
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.
Internet Explorer 7이하에서는 사용할 수 없으며, *zoom: 1 이라는 속성을 사용하면 비슷하게 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_display속성_selfEX</title>
</head>
<style>
*{margin: 0;
padding: 0;
}
.wrap{
border: 1px solid red;
overflow: hidden;
}
.wrap .floating_box{
border: 1px solid gray;
width: 200px;
height: 200px;
float: left;
}
.wrap .box{
border: 5px solid gold;
width: 200px;
height: 200px;
clear: both;
box-sizing: border-box;
}
.other_wrap{
border: 1px solid purple;
overflow: hidden;
}
.other_wrap .floating_box{
border: 1px solid blue;
width: 200px;
height: 200px;
display: inline-block;
}
.other_wrap .box{
border: 5px solid gold;
width: 200px;
height: 200px;
box-sizing: border-box;
}
span{
border: 5px solid green;
width: 200px;
height: 200px;
display: block;
box-sizing: border-box;
}
</style>
<body>
<div class="wrap">
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="floating_box">floating box
</div>
<div class="box">box
</div>
<span>span</span>
<mark>인라인 요소에 가로세로 길이를 지정했을 때 사이즈가 안 먹는다. 이 때 display:block으로
지정하면 박스 사이즈가 먹는 것을 확인할 수 있다!!</mark>
</div>
</body>
</html>
# in line block으로 해서 하나의 줄에 배치하는 경우에는 젤 마지막에 있는 박스를 clear both주지 않아도 원래의 속성대로 배치된다.
# 짜는 사람마다 성향이 다르겠지만, float값을 대체적으로 더 많이 사용하지 않을까 싶다(:
[ 메인페이지 레이아웃 짜기 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_메인페이지 레이아웃 짜기</title>
</head>
<style>
*{margin: 0;
padding: 0;
}
ul li, ol li{
list-style: none;
text-transform: lowercase;
}
#wrapper{
border: 1px solid gray;
width: 80%;
margin: 0 auto;
padding: 5px;
}
header, nav, div#main, footer, section#content, aside{
border: 1px solid grey;
}
header, footer, nav{
height: 100px;
text-align: center;
line-height: 100px;
text-transform: uppercase;
}
header{
margin-bottom: 5px;
}
nav{
line-height: 50px;
margin-bottom: 5px;
}
nav li{
border: 1px solid gray;
width: 20%;
float: left;
box-sizing: border-box;
height: 30px;
line-height: 30px;
background: #5cb223;
background: -moz-linear-gradient(45deg, #5cb223 0%, #2989d8 50%, #207cca 51%,
#5639b 100%);
background: -webkit-linear-gradient(45deg, #5cb223 0%, #2989d8 50%, #207cca 51%,
#5639b 100%);
background: linear-gradient(45deg, #5cb223 0%, #2989d8 50%, #207cca 51%,
#5639b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5cb223',
endColorstr='#56539b',GradientType=1);
}
nav ul{
border: 1px solid red;
width: 80%;
margin: 0 auto;
overflow: hidden;
}
section#content, aside{
height:250px;
text-transform: uppercase;
text-align: center;
}
section#content{
width: 79%;
float: left;
box-sizing: border-box;
margin-right: 1%;
}
aside{
width: 20%;
background-color: yellow;
float: right;
box-sizing: border-box;
}
#main{
overflow: hidden;
padding: 5px;
margin-bottom: 5px;
}
</style>
<body>
<div id="wrapper">
<header>header</header>
<nav>
navigation
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</nav>
<div id="main">
<section id="content">
content
</section>
<aside>banner</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
tip.
스타일을 줄 때도 한 눈에 알아보기 쉽게! 가시성있게 편하게 하려면, 뭐에 대한 스타일을 주는 거다라고 주석처리를 하는 게 좋다. 코딩은 팀 작업이 많으니까(:
# 항상 자기 직속부모를 기준으로 해서 퍼센트가 들어간다. (너비 등)
[ 네이게이션과 그라디언트 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_네비게이션과 그라디언트</title>
</head>
<style>
*{margin: 0;
padding: 0;
}
nav{
width: 800px;
border: 1px solid grey;
margin: 0 auto;
}
nav ul{
overflow: hidden;
}
nav li{
border: 1px solid red;
list-style: none;
width: 20%;
float: left;
box-sizing: border-box;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
}
nav a{
background-color: orange;
color: white;
text-decoration: none;
width: 100%;
display: block;
height: 50px;
background: #ed7184;
background: -webkit-linear-graident(#ed7184 1%, #eaea96 50%, #ffc9d5 100%);
background: -o-linear-gradient(#ed7184 1%, #eaea96 50%, #ffc9d5 100%);
background: linear-graident(#ed7184 1%, #eaea96 50%, #ffc9d5 100%);
filter: progid:DXImageTransform.Microsoft.graident( startColorstr='#ed7184',
endColorstr='#ffc9d5',GradientType=0 );
}
</style>
<body>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</nav>
<mark>a태그는 inline요소이므로 width, height 값을 가지려면 display:block으로 준다!!</mark>
<h1>그라디언트를 css3를활용하여 코딩 생성하는 사이트:</h1>
<h2>가상으로 이미지 생성해주는 사이트</h2>
<p>via.placeholder.com/150</p>
<p>placehold.it/150</p>
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/300" alt="">
<img src="https://via.placeholder.com/200x50" alt="">
<img src="https://via.placeholder.com/300x100/3cd0c9/ffffff" alt="">
<img src="https://via.placeholder.com/300x100/fa9f4a/ffffff/?text=www.naver.com" alt="">
<img src="https://via.placeholder.com/300x100/fa9f4a/ffffff/?text=animal character" alt="">
</body>
</html>
# gradient 속성.
방법은 두가지!
원래예전에는 코딩으로 짤수 없었다.
css3가되기 전까지는...
그라디언트를 웹페이지에 추가하려면 이미지로넣었어야 했는데
css3로 오면서 가능해짐(:
# 대신, 최신의 브라우저에서만 먹는다는 단점...+_+
그런것들을 보완하기위해서 이미지를 넣는 경우도있지만
코드가 안먹을때는 다른 코드를 먹어라해서
다른 방법을 사용하기도 한다.
# vender prefix 자동으로 붙이는 접두사.
-> 브라우저마다 브라우저를 동작시키는 기계라고 보면된다.
각각의 브라우저 회사마다 그 서버같은 기계들이 최신의 코드를 인식하지 못할때
최신의 코드를 인식해라 하는 접두사 같은 건데,
마이크로소프트회사의 경우
-ms-
오페라는
-0-
크롬, 사파리는
-webkit
모질라는
-moz-
이렇게 vender prefix를 붙여서 코드를 넣어준다.
# 그런데 이렇게 하는게 귀찮아서
vender prefix를 자동으로 생성해주는 자바스크립 코드가 나왔다. (나중에 배울것)
# 다행히 코딩을 생성해주는 사이트는 많다.
대표적으로 그라디언트를 일러나 포토샵에서 칼라픽커로 생성해서 주듯이
자동으로 생성되는 사이트: colorzilla.com
http://colorzilla.com/gradient-editor/
+
프로토타입 제작시, 추천 사이트!
# 사이트에도 나와있지만,
https://via.placeholder.com/150
https://via.placeholder.com/150x50
을 img에 src속성에다가 넣어두면
이미지 사이즈를 prototype형식으로 제작해 넣을 수 있다(:
# a태그는 기본적으로 브라우저가 나는 파란색으로쓰겟다라는 디폴트값이 들어있다.
칼라를 바꾸고싶으면 a태그에다가 바꿔줘야함. (직접)
# a태그는 inline요소이므로 width, height 값을 가지려면 display:block으로 준다!!
다소어렵지만, 신기하고너무재밌는코딩의세계...❤︎
'IT' 카테고리의 다른 글
| 상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child (0) | 2022.06.29 |
|---|---|
| 레이아웃 연습하기 / Z 레이아웃 (0) | 2022.06.28 |
| 속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float (0) | 2022.06.26 |
| CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학) (0) | 2022.06.25 |
| Coding study : CSS / margin:0 auto; (0) | 2022.06.24 |