1.float 정리
웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성
해보면서 알아야하지만.. 단순히 말하면 필요한 영역을 지정하고 각 div들을 float로 띄우게 되면
영역의 크기에 따라 옆으로 나열할 수 있게 하는 기능중 하나이다.
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;- left : 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드
- right : 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드
- none : 요소가 부동하지 않아야 함을 나타내는 키워드
- inline-start : 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드
즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽. - inline-end : 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드
즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.
** left와 right를 통해 부유속성을 지정시 display는 무시(none은 제외)
또한 ,이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐
float: left 를; 활용하면 그리드 형태를 만들수 있다.
html
<!DOCTYPE html>
<html>
<head>
<title>그리드 연습</title>
<meta charset="utf-8" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="indigo"></div>
<div id="purple"></div>
</body>
</html>
css
body {
margin: 10px auto 0px auto;
width: 900px;
}
/* 전체 */
div{
height: 200px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
/* 개별 */
#red {
background-color: red;
width: 895px;
}
#orange {
background-color: orange;
width: 300px;
}
#yellow {
background-color: yellow;
width: 590px;
}
#green {
background-color: green;
width: 220px;
}
#blue {
background-color: blue;
width: 220px;
}
#indigo {
width: 220px;
background-color: indigo;
}
#purple {
width: 220px;
background-color: purple;
}
2. 연습 _ 기사에서 이미지 배열하기
html
<!DOCTYPE html>
<html>
<head>
<title>4차 산업혁명의 시대, 소프트웨어 교육은 필수</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<h1 class="title">4차 산업혁명의 시대, 소프트웨어 교육은 필수</h1>
<div class="content">
<img id="codeit" src="images/codeit.jpg">
<p>코드잇 강영훈 대표 '소프트웨어 강국되려면 컴퓨터적 사고방식 필요해'</p>
<p>"누구나 프로그래밍을 배워야한다. 사고하는 방법을 가르쳐주기 때문이다." 故 스티브잡스 애플 창업자가 했던 말이다.</p>
<p>소프트웨어는 4차 산업혁명의 흐름이다. 인공지능, IoT, 빅데이터, 3D프린팅, 가상 현실, 증강현실 등 모두 소프트웨어와 긴밀한 연관성을 갖고 있는 분야이다.</p>
<p>미래의 흐름에 발맞춰 정부는 2018년부터 초, 중, 고등학교에서 소프트웨어 교육을 전면 실시할 계획이다. 이에 앞서 지난해와 올해 미래부, 교육부에서 900개의 연구기관 및 선도학교를 정해 교육하고 있다. 또한 정부는 올해 8개 소프트웨어 중심 대학을 선정해 연간 최대 20억원을 지원하는 등 산업혁명에 필요한 인력 양성에 주력하기로 했다.</p>
<div class="link">
<a href="http://www.edaily.co.kr/news/NewsRead.edy?SCD=JE41&newsid=02587926612750928&DCD=A00504&OutLnkChk=Y" target="_blank">
인공지능의 발달, 어떻게 대처해야 하나
</a>
</div>
<p>소프트웨어가 미래 산업에 필수적인 부분이지만, 현재 국내 환경에 적합한 소프트웨어 교육 콘텐츠는 많지 않다. 대부분의 학원이 자격증을 위한 주입식 소프트웨어 교육을 하기 때문이다.</p>
<img id="youtoo" src="images/youtoo.jpg">
<p>이에 강영훈 대표는 한국 최고의 소프트웨어 교육을 제공하고자, 미국 실리콘밸리의 소프트웨어 신기술과 아이비리그 컴퓨터과학과의 교육 체계를 혼합해 '온라인 프로그래밍 스쿨'을 만들었다. 코드잇은 이러한 공로를 인정받아 창업진흥원과 스마트벤처창업학교의 교육 콘텐츠 부문에서 '우수 스타트업'으로 선정된 바 있다.</p>
<p>코드잇은 컴퓨터적 사고력을 기르는 동영상 강의뿐만 아니라, 실력을 늘리기 위해 꼭 필요한 과제와 1:1 과제 첨삭 시스템까지 갖췄으며, 사이트에서 직접 코드를 실행하고 수강생끼리 코드를 비교해볼 수 있는 코드 공유 시스템도 제공하고 있다.</p>
<p>한편, 강영훈 대표는 "한국이 소프트웨어 강국이 되려면 자격증이나 단순 주입식 암기와 같은 일차원적인 교육에서 벗어나, 스스로 컴퓨터적으로 사고하는 능력을 키워주는 높은 차원의 교육이 필요하다"고 전했다.</p>
</div>
</body>
</html>
css
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
/* 제목 */
.title {
text-align: center;
border-bottom: 1px solid #eee;
margin: 0;
padding-top: 25px;
padding-bottom: 25px;
}
/* 기사 본문 */
.content {
font-size: 18px;
width: 70%;
max-width: 900px;
margin: 50px auto;
}
/* 링크 */
.link {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
font-weight: bold;
padding: 15px 10px;
}
.link a {
color: #222;
text-decoration: none;
}
/* 코드잇 광고 */
#codeit {
width: 180px;
height: 180px;
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
/* 야너두 광고 */
#youtoo {
width: 180px;
height: 180px;
float: right;
margin-left: 15px;
margin-bottom: 15px;
}
2. 연습 _ 카드 그리드 배치
html
<!DOCTYPE html>
<html>
<head>
<title>코딩의 민족</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>코딩의 민족</h1>
<h2>넌 코딩할 때가 제일 이뻐</h2>
<div class="food-container">
<div class="menu">
<img src="https://bakey-api.codeit.kr/files/587/images/chicken.jpg" width="300" height="200">
<div class="info">
<h3>코딩에 빠진 닭</h3>
<p>코딩의 밤을 채워줄 당신의 야식!</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="menu">
<img src="https://bakey-api.codeit.kr/files/587/images/sushi.jpg" width="300" height="200">
<div class="info">
<h3>코코 스시</h3>
<p>코딩의 밤을 채워줄 당신의 야식!</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="menu">
<img src="https://bakey-api.codeit.kr/files/587/images/burger.jpg" width="300" height="200">
<div class="info">
<h3>코데리아</h3>
<p>코딩의 밤을 채워줄 당신의 야식!</p>
<a href="#">바로 결제</a>
</div>
</div>
<div class="menu">
<img src="https://bakey-api.codeit.kr/files/587/images/bibimbap.jpg" width="300" height="200">
<div class="info">
<h3>코가네</h3>
<p>코딩의 밤을 채워줄 당신의 야식!</p>
<a href="#">바로 결제</a>
</div>
</div>
</div>
</body>
</html>
css
@font-face {
src: url("../fonts/BMJUA_otf.otf");
font-family: Jua;
}
* {
font-family: Jua;
color: #58595B;
}
body {
background-color: #F0E8D9;
}
h1 {
text-align: center;
margin-top: 75px;
margin-bottom: 30px;
font-size: 64px;
}
h2 {
text-align: center;
margin-bottom: 75px;
font-size: 32px;
}
.food-container {
width: 660px;
margin-left: auto;
margin-right: auto;
}
.menu {
width: 300px;
background-color: white;
border-radius: 10px;
overflow: hidden;
margin-bottom: 50px;
margin-left: 15px;
margin-right: 15px;
text-align: center;
float: left;
}
h3 {
font-size: 30px;
font-weight: 300;
margin-top: 0;
margin-bottom: 20px;
}
.menu p {
margin-top: 0;
margin-bottom: 16px;
}
a {
text-decoration: none;
color: blue;
}
.info {
padding: 10px;
}'개발 공부 > HTML, CSS' 카테고리의 다른 글
| HTML/CSS _ 포지션(position) relative,absolute 정리 (0) | 2022.02.28 |
|---|---|
| HTML/CSS _ 선택자 정리 (부모,자식,복수,여러개,Pseudo-class (가상 클래스)) (0) | 2022.02.28 |
| HTML/CSS _ display 기본 및 text-align, vertical-align, iline-height (feat. flexbox) (0) | 2022.02.28 |