오른쪽이 가장 기본적인 버튼인데, 화려하지 않은 정말 기본 디자인이다. 그런데 button 태그에 class 선택자를 지정했더니 왼쪽 버튼처럼 모양이 바뀐 것을 볼 수 있다.
-> 이는 우리가 link 태그로 불러온 semantic.min.css 파일에 "ui button"이라는 클래스에 할당된 버튼 서식(?)이 따로 존재하기 때문에 가능하다. 파일을 불러오지 않고 class만 지정한다고 바뀌는 게 당연히 아니다.
Q. 버튼을 직접 만드는 건 매우매우 어려울 것 같은데, 여러 버튼 디자인을 사용하고 싶다면 라이브러리를 떠돌아 다니면 되는 것인지 궁금하다.
(A). 후속 강의를 들어 본 결과 그런 것 같다... 하지만 요즘은 여러 UI들이 많이 나와서 그나마 다행. 아마 내가 생각한 것의 대부분은 인터넷 어딘가에 돌아다니지 않을까 싶다.
3. Semantic UI 잘 사용하는 법
1. Semantic UI의 사이드바
: 사이드바에는 Semantic UI로 구현할 수 있는 여러 기능들이 있다. 각 기능을 누르면 해당 기능을 구현하면 어떤 모습이 되는지를 보여준다. 이걸 참고해서 원하는 기능을 사용하면 된다.
2. 원하는 기능을 가져오는 방법
1) Include in your HTML에서 미리 해당 css 파일과 javascript파일을 link 태그로 가져온다.
2) 해당 기능의 Example 코드를 복사 붙여넣기한다.
=> 2)까지 하면 실행되는 기능이 있고, 실행이 안 되는 기능이 있다.
실행이 안 되는 기능의 경우, javascript의 기능이 필요해서 그렇다. 즉 javascript를 initialize(초기화)해야 한다. 3)으로!
* 이런 기능은 보통 '움직임'을 포함하는 경우가 많다!
3) 보통 이런 기능의 경우, 페이지에 4가지의 탭이 있다. (Definition / Examples / Usage / Settings)
여기서 Usage에 들어가서, javascript 코드를 복사해 줘야 한다.
복사할 때는 script 태그 만들고 그 안에 넣어줘야지, 그냥 넣어주면 반영이 안 된다!
b/c html에서 script태그의 역할 중 하나는, css나 javascript등 다른 언어? 프로그램?을 불러올 때 script 태그 안의 코드는 그 다른 언어로 시행하겠다! 라고 선언하는 것이기 때문에, 이 선언을 안 해주면 html이 해당 코드를 javascript 방식으로 처리하지 못한다.
<사용예시>
1. Dropdown
이렇게 Text라고 쓰여진 버튼? 을 누르면 위/아래로 선택할 수 있는 콤보 상자처럼 나오는 기능이 Dropdown이다. 이 기능은 '움직임'이 있어서 그런지 javascript를 initialize해야 사용할 수 있다.
1) 코드 복사하기
2) javascript initialize시키기 : script 태그를 밑에 추가하고, 이런 코드를 추가한다.
<script>
$('.ui.dropdown').dropdown();
</script>
이 코드는 javascript의 문법대로 실행된다.
$ 뒤의 () 안에는 어떤 대상에다 코드를 적용할 것인지를 명시하고, 뒤에는 메소드(함수)를 호출한 것이다.
즉 javascript에 있는 dropdown 함수를 불러와서 class가 ui dropdown인 엘리먼트들에 해당 기능을 적용했다.
3) 기존 기능을 변경하는 방법
: Semantic UI를 사용하면서 원하는 점과 조금 다를 수 있다.
ex) dropdown의 목록이 좀 더 천천히 내려왔으면 좋겠다 등등
-> 그런 세부사항들은 4가지 탭 (Definition / Examples / Usage / Settings) 중에서 Settings에서 설정 가능하다.
이런 식으로 각 기능들이 있다. 가운데는 default value이고, 오른쪽엔 설명, 왼쪽에는 해당 속성의 이름이 나와 있다. 즉 이 속성을 변경하고 싶으면 duration 값을 다르게 바꿔 주면 된다.
CSS는 표준화된 기술이다. 어느 한 집단에서 만들어서 배포(X), 위원회가 있고 다양한 논의를 통해 기술을 확정(O)
CSS에 다른 문법을 추가하자는 논의가 있었는데, 그것이 있으면 편해지기도 하지만 반면 CSS를 더 복잡하게 만들 수 있어서 CSS에 새롭게 넣지는 못했다.
그러나 위원회 등 공식적 기관이 아닌, 일부 개인과 집단들은 이 문법을 통해 다른 것들을 만들어 내기도 했는데,
그것이 바로 preprocessor이다.
즉 '표준화되거나 수용되지는 않았지만, 기존 CSS문법을 벗어나지 않는 선에서 변환되면서도 더 많은 기능을 수행할 수 있는 문법으로 코드를 작성하는 기술?도구?'이다.
ex. 문제상황
<!-- 기존의 CSS 코드 -->
body {
font: 14px/1.5 Helvetica, arial, sans-serif;
}
body #logo {
border-radius: 5px;
}
<!-- Stylus를 사용해서 작성한 코드 -->
body {
font: 14px/1.5 Helvetica, arial, sans-serif;
#logo {
border-radius: 5px;
}
}
코딩의 극단적 상황 : #logo 와 같은 id selector가 수십 개 있다고 생각해 보자.
그냥 body 태그 안에 적으면 될 일 이지만, CSS에서는 그렇게 할 수 없고 꼭 body #logo 순으로 일일이 body를 앞에 명시해줘야 한다. -> 귀찮음
그래서 Stylus 라는 preprocessor를 만들었는데, 이 Stylus에서는 #logo를 body{} 안에 넣기만 하면 앞에 body라고 언급해 주지 않아도 된다.
이럴 때, Stylus preprocessor를 이용해서 간단하게 코드를 작성하고, 그 다음에 해당 Stylus 파일을 그대로 웹브라우저에 적용할 수 없으므로, 그때 다시 CSS형식으로 컴파일 해 주면 된다.
1. 에디터에서 preprocessor 이용해서 코드 간단히 작성하기
1. 해당 Stylus를 editor에서 사용할 수 있게 하기 위해서, 확장 프로그램을 설치해야 한다.
-> [확장 프로그램 아이콘] 누르고, 'stylus' 검색해서 "Stylus Auto Compiler" 설치하기.
=> 그러면 이제 editor에서 stylus 형태의 파일을 저장하고 사용할 수 있다.
2. Stylus의 확장자는 styl임. => 파일이름.styl 으로 html editor에 파일을 하나 만든다.
(1번 없이 2번 작업이 불가능)
3. 해당 stylus의 간단한 문법을 사용해서 코드를 작성한다.
2. preprocessor을 이용해서 작성한 코드를 다시 컴파일하기
컴파일(compile) : 하나의 언어로 쓰여진 문서를 다른 언어로 옮기는 것.
(여기서는 Stylus로 쓰인 문서를 CSS 형식으로 옮긴다.) 두 가지 방법이 있다.
방법1) 에디터(editor)를 이용해서 컴파일
1. 해당 파일이름.styl 파일을 저장하면, 저장하면서 동시에 파일이름.css 이라는 파일이 하나 더 생긴다.
2. 그 파일은 stylus로 작성된 코드를 css형식으로 컴파일시킨 파일이다.
3. 웹브라우저에 해당 코드를 적용시키려면 2번 파일(css형식)을 사용해야 한다.
: html>head>link^body 에서, link href = "파일이름.css" 라고 명시해 준다.
-> 실행시키면 Stylus preprocessor로 작성해서, css 형식으로 변환된 파일이 html 웹브라우저에 나타난다.
** 사실 Stylus 기능은 유용하다고 생각하지만, 지금 나의 입장에서는 크게 사용할 일이 없을 것 같다...
중복을 제거하면서 코드를 효율적으로 수정할 수 있는 방법이 link 와 import 이다.
사용하는 방법
여러 개의 웹페이지의 디자인/스타일에서 겹치는 코드만 복사해서 새 페이지에 복사한다.
후에 이 디자인 서식을 사용한다면 이 새 페이지에서 끌어와서 사용할 것이다.
* 이때, 디자인서식이 들어있는 새 페이지의 확장자는 .css 이다!
/* 스타일 적용하는 파일 */
h1{
background-color : black ; color : limegreen ;
transition : all 1s ;
}
h1:hover{
background-color : white ; color : orangered ; text-align : right ;
}
1. 화면 크기를 위해서 mobile과 main frame의 width와 height을 대폭 늘려서 지정하였다.
2. 기존 양식은 날짜와 시간만 있고 '할 일' 영역은 없었는데, 여기에 '할 일' 영역을 추가하였다.
여기서 flex 형식이 많이 사용되어서 주의해야 했다. 가령 컨텐츠는 나라를 기준으로는 column으로 정렬되지만, 그 안에서의 날짜를 기준으로는 row로 정렬되고, 또 하루 날짜 안에서의 시간과 할 일은 column으로 정렬되지만, 그 안의 시간과 할 일은 row로 정렬되었다.
3. flex 형식을 지정할 때는 지정할 단위에서 '가장 바깥에 있는 element'에다 지정해야 하는데, 이를 찾는 것이 조금 까다로웠다.
=> CSS 구조가 복잡할 시 레이아웃 맵을 그려놓거나, 배경색으로 각 div 요소의 영역과 포함관계를 뚜렷이 구분하면서 작업하면 덜 헷갈릴 것이다.
아쉬웠던 점:
아직 JavaScript 등을 모르다 보니, 해당 글은 코드에 직접 작성한 것이다. 그래서 코드가 불필요하게 길어지고, 어디에 입력할지를 정확히 찾기 어려웠다. 스크립트 언어를 배워서 편하게 작성할 수 있다면 더 좋을 것 같다.
3. 혼합(blend)
: 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법!
어떤 이미지를 혼합하느냐에 따라서, 두 가지 모드가 있다.
1. background-blend-mode : 배경 이미지끼리 혼합
여기서의 배경 이미지 두 개: background-color & background-image
위 이미지와 텍스트 컬러가 다르다. blend되지 않고 텍스트와 이미지가 개별적으로 존재하는 모습이다.
3) 방법을 알아냈다.
-> body 태그에 적용하면 되고 개별 class에 적용하면 안 되었던 이유는 포함관계 때문인 것 같다.
body태그가 class보다 큰/포괄적인 개념이므로, 포괄적인 body 태그에 이미지를 먼저 적용하고, 그 안의 div class에 텍스트를 적으면 가능했지만, level이 같고 동일한 class에 background-image와 텍스트 속성을 둘 다 적용해버리면 되지 않았던 것이다.
=> 바깥의 태그/element에 background-image 를 적용시키고, 더 안쪽의 element에 텍스트와 background 속성을 적용하면 문제없이 적용된다. 이렇게!
<style>
.blend1{
background-image : url('netflix.jpg') ; background-size : contain ;
}
.blend2{
font-size : 2rem ;
color : limegreen ;
font-weight : bold ;
mix-blend-mode : screen ;
}
</style>
</head>
<body>
<div class="blend1">
<div class="blend2">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
</div>
</div>
</body>
</html>
4. 변형(transform)
element의 크기, 위치, 모양 등을 변경하는 속성!
여러 효과를 섞어서 사용할 수 있다.
transform : 효과이름 (세부사항)
rotate , scale , translate , transform , skew 등 여러 종류가 있다.
1) scale : element의 확대/축소
scale을 적용할 방향(x,y축)과, 숫자로 확대/축소 비율을 지정할 수 있다.
2) rotate : element의 회전
3) translate : element를 지정 방향으로 움직임
4) skew : element를 늘임/줄임으로 왜곡
5) origin : element의 origin(기준점)을 설정하고, 이를 기준으로 1)~4) 의 효과를 적용가능
6) matrix : element에 더 다양한 효과를 줄 수 있는 옵션이지만, matrix(행렬) 개념을 알고 있어야 함.
그런데 효과가 잘 적용되지 않는다.... 다른 문제가 있는 것 같은데 나중에 원인을 찾아봐야겠다.
+ transform 효과로 문 닫기 & matrix 속성으로 다양한 효과 적용해보기가 목표.
align-content : 본문 요소들이 많아서 multi columns/rows 상태일 때 적용된다.
align-items : 같은 row/column 안의 본문 요소들에게만 적용된다.
[2] 개별 element에 적용되는 속성
1) align-self
: align-items 의 개별 버전.
한 row/column의 item을 모두 한 방향으로 정렬했지만 일부 element만 다른 정렬 방식을 적용하고 싶을 때 사용.
align-items 에 쓰인 값들을 사용할 수 있다.
#ending{
display:flex ; align-self:flex-end ; color:forestgreen ;
}
<div id="ending">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quasi impedit, rem consequuntur odio nulla recusandae officiis. Error voluptate aut maiores voluptates, iusto aspernatur, hic mollitia, dolorum, at sint repellendus!</div>
초록색 문단만 끝에서부터 시작함!
2) flex 축약형 버전
: border의 여러 속성들을 한 번에 나열하는 것처럼(ex. border: 1px solid gray), flex도 가능하다.
1. 형식
적용할 element{flex-shrinkflex-growflex-basis}
* flex-grow , flex-shrink 는 정수, flex-basis는 100%가 최대인 % 단위
ex) 검색엔진에서는 앞에 나오는 내용이 더 검색 순위에 중요하게 작용하는 경우가 많은데, 이를 대비해서 <main> 태그 안의 내용을 앞에다 입력하고 싶다. 그런데 디스플레이 상으로는 <nav>와 <aside> 사이에 보이게 하고 싶을 때.
* order 는 정수 단위로 가능. order 를 따로 제시하지 않는다면 가장 먼저 제시되는 element의 order는 0이다.
* order 값이 작을수록(음수도 가능) 먼저 배치된다.
<!DOCTYPE html>
<html>
<head>
<style>
.container{display:flex ; flex-direction:column ; text-align:center;}
.content{display:flex ; flex-direction:row}
nav{border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
order:0}
main{order:1}
header{ border-bottom : 5px solid gray ;}
aside{border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
order:2}
footer{border-top : 5px solid gray}
</style>
</head>
<body>
<div class="container">
<header><h1>KSY</h1></header>
<div class="content">
<main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
</main>
<nav><ol><li>HTML</li><li>CSS</li> <li>JavaScript</li></ol></nav>
<aside><ul><li>A</li><li>B</li><li>C</li> <li>D</li></ul></aside></div>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer> </div>
</body>
</html>
body에서는 <nav> 태그보다 <main>태그의 내용이 앞에 제시되었지만, order 속성을 통해서 화면에는 nav 태그가 더 왼쪽에(먼저) 배치되었다.
여러 개의 media 조건이 있고, 그 조건의 범위가 중첩될 경우, CSS에서는 우선순위에 따라 처리한다.
CSS는 구체적이고 세부적인 조건일수록 높은 우선순위를 가지고,
또한 복잡성/세부적인 정도가 같다면(같은 level이라면) 아래에, 나중에 작성된 조건이 우선순위가 높다!
그래서 이 경우, 의도는 ~600 : red , 601~1200 : green 이었지만, 막상 결과는 ~1200 : green 으로 적용된다.
=> 더 우선순위를 높이고 싶은 조건이 있다면, 그 조건을 동일 level에서 가장 아래에 배치해야 한다!
3) media query 응용
: flex와 media query를 적용해서, 모바일 환경에서의 디스플레이를 따로 지정해 보기.
나의 경우, 너비 600px을 기준으로 media query를 적용하였다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>EXAMPLE</title>
<style>
.container{
display:flex ; flex-direction:column ; text-align:center;
}
.content{
display:flex ; flex-direction:row
}
nav{
border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
background-color : darkorange
}
header{
border-bottom : 5px solid gray ; background-color:lime
}
aside{
border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
background-color : deeppink
}
footer{
border-top : 5px solid gray
}
main{
background-color : lightskyblue
}
@media (max-width:600px) {
.container{
display:flex ; flex-direction:column ; text-align:center;
background-color : black
}
.content{
display:flex ; flex-direction:column
}
nav{
border-bottom : 5px solid gray ; padding:20px ; flex-basis:50px ;
border-right : 0px ; color : darkorange ; background-color : black
}
header{
border-bottom : 5px solid gray ; color:lime ; background-color : black
}
main{
border-bottom : 5px solid gray ; color:lightskyblue ; background-color : black
}
aside{
border-left : 0px ; flex-basis : 40px ; color : deeppink ; background-color : black
}
footer{color : white ; background-color : black}
}
</style>
</head>
<body>
<div class="container">
<header><h1>KSY</h1></header>
<div class="content">
<nav><ol><li>HTML</li>
<li>CSS</li>
<li>JavaScript</li></ol></nav>
<main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
</main>
<aside><ul><li>A</li>
<li>B</li>
<li>C</li>
<li>D</li></ul></aside>
</div>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer>
</div>
</body>
</html>
1. 좁은 화면(600px 미만)
2. 넓은 화면
너비가 좁을 경우는 display : flex ; flex-direction : column 으로 지정함으로써 모든 컨텐츠를 수직으로 배열하였다.
3. multi column
: 신문처럼 여러 개의 단(column)으로 구성된 배치를 하고 싶을 때 사용하는 방법/레이아웃.
: box model 을 사용할 때 지정하는 속성 중 하나로, 기존 box model 사용 시의 불편함을 없애려고 만들었다.
기존의 문제점
holy grail layout 등을 만들면서 box model을 사용하여 padding, border, width 등을 지정할 때, html 태그의 width가 여러 float 속성을 적용한 요소들의 width의 합과 맞아떨어져야 보기좋은 레이아웃이 만들어지는데, 이때 각 요소들의 border과 margin 값을 고려하여(추가로 더해서) width 값을 예상해야 하는 불편함이 있었다.
ex) element1의 width는 300, border는 10, element2의 width는 400, border는 15, margin은 20일 경우
: 세로로 배치될 header, segment(메인 컨텐츠), footer 부분은 flex-direction : column으로 설정,
segment(메인 컨텐츠) 안에서 가로로 배치될 nav, main, aside 부분은 flex-direction : row 로 설정.
2) flex-shrink (* 그 전에 flex-basis 값을 지정해야 함)
: 창 크기가 부족할 때, 메인 컨텐츠는 계속 나타나게 하고 싶다면
=> nav와 aside만 flex-shrink : 1 로 설정.
<html>
<head>
<meta charset="utf-8">
<style>
.container{
display:flex ;
flex-direction:column ;
text-align:center ;
}
.content{
display:flex ;
}
header{border-bottom: 1px solid black ; padding-left:20px}
footer{border-top : 1px solid black ; padding:20px}
.content nav{border-right : 1px solid black}
.content aside{border-left : 1px solid black}
nav,aside{flex-basis : 400px ; flex-shrink:1}
</style>
</head>
<body>
<div class="container">
<header>
<h1>WELCOME</h1>
</header>
<div class="content"><nav><ul>
<li>Corporis</li> <li>fugit</li> <li>maxime</li> <li>ut</li> <li>veniam</li> <li>quo</li> <li>dolorum</li> <li>repellendus</li> <li>ab</li> <li>soluta</li> <li>voluptates</li> <li>velit</li></ul>
</nav>
<segment>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id cum autem pariatur debitis quae delectus eum temporibus animi quis ad, rerum doloremque non distinctio, minus enim, nihil. Dolores officiis, iusto commodi. Harum, accusamus quas pariatur autem odio sequi tempore obcaecati ab commodi, optio assumenda, unde et tenetur quisquam beatae doloribus. Porro hic odio molestias doloremque, vitae laborum voluptatibus quam deleniti placeat. Explicabo consequatur sit nemo animi reiciendis amet ratione quod possimus fuga eos ab, minima aspernatur voluptatum iure aperiam, dolorum, porro totam saepe. </p><p>Aut beatae, deleniti fugit commodi quis distinctio doloribus culpa est recusandae, illum magni itaque magnam a corrupti nam id, dolorum sapiente iste quidem non, velit error reiciendis. Laborum sint veniam sunt in impedit temporibus architecto deleniti dicta tempore, repudiandae dolor facilis aliquid ea distinctio. Assumenda magnam ratione laudantium eligendi molestias quo, natus voluptatum quos ullam rerum unde vel debitis consequuntur porro, ipsam repellat aliquid saepe maxime impedit asperiores fugiat cupiditate dolores beatae. Sequi quas a culpa magnam voluptates quibusdam, consequatur odit inventore fuga suscipit molestiae sed rem quaerat voluptatem velit, mollitia nemo, animi adipisci.</p> <p>Sapiente dignissimos enim reiciendis, iure? Doloribus nostrum officiis placeat temporibus mollitia assumenda quis tempore accusantium eius vitae laboriosam saepe deserunt nihil accusamus impedit, omnis nobis ab cupiditate iste repellendus facilis inventore! In quisquam maxime molestias itaque nam nobis eligendi, rem ullam autem alias quos deleniti, culpa quas dolores illum animi labore repellendus ab! </p>
</segment>
<aside>
Nisi mollitia praesentium id cumque est repellat hic, animi, qui natus assumenda nihil repudiandae asperiores neque laudantium soluta.
</aside></div>
<footer>
GOODBYE
</footer>
</div>
</body>
</html>
따로 width, border 등을 계산하지 않고도 선과 배치가 맞아떨어지는 layout을 구현할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;}
#bb{display:block ; border : 20px solid gold ;}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
2) margin : 주로 화면의 양 끝과 block element의 사이 간격을 의미
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
margin : 50px}
#bb{display:block ; border : 10px solid gold ;
margin : 100px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
3) padding : border 테두리와 그 안의 텍스트의 간격을 의미
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
padding : 50px}
#bb{display:block ; border : 10px solid gold ;
padding : 100px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
4) width : 테두리 상자(border)의 가로폭.
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
width : 500px}
#bb{display:block ; border : 10px solid gold ;
width : 1000px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
5) height : 테두리 상자(border)의 세로폭. height를 고정했는데 텍스트의 양이 많으면 삐져나올 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
height : 50px}
#bb{display:block ; border : 10px solid gold ;
height : 100px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
2. inline display 와 border display에 따라서 적용되는 방식이 다르다
1) inline display의 경우, 4), 5)번인 width 와 height 속성이 적용되지 않는다.
2) margin의 기준이 '화면의 양 끝과 element의 사이' 가 아니라 '양 element의 간격'이다.
: 이번엔 기준값이 화면 좌상단이 아니라, #parent 가 적용된 Blended 부모 태그로 바뀌었다.
그런데 아까는 각 태그 요소들이 화면 폭을 다 채운 데에 비해, 지금은 position:absolute 인 Blended 요소를 포함한 하위 요소들은 화면 폭을 다 채우지 못한다.
#parent{position:relative}
parent id의 속성을 relative로 바꾸면, Zavachip의 위치는 그대로이나 나머지 요소들은 다시 화면 폭을 그대로 채운다.
=> position:relative 와 position:absolute 의 차이는 단순히 자식 태그의 위치 기준이 바로 위의 부모 태그인지, position:static 이 아니면서 그나마 가장 가까운 부모 태그인지 만의 차이가 아닌 것이다. 화면상의 정렬에도 둘의 차이가 있다!
<-> clear 속성은 다른 태그('그 element를 피하는 대상') 에 적용한다. (ex. p 태그)
주로 <style> 태그 안 img 태그에는 float 속성을 일반적으로 적용하고, float 속성을 적용하고 싶지 않은 일부 단락에 clear 속성을 적용하는 것으로 보인다.
clear에는 3가지 값을 지정할 수 있다 : left , right , both
left : float의 값이 left인 경우에만 float 속성을 무력화
right : float의 값이 right인 경우에만 float 속성을 무력화
both : float의 값에 상관없이 float 속성을 무력화 -> 셋 중에 가장 많이 쓰임
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
img{width:200px ; float:right ; margin:15px}
</style>
</head>
<body>
<img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank">
<!-- float만 설정, clear 는 설정 안 함-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
<img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank">
<!-- float와 clear 모두 설정되어서 float 설정이 무력화됨-->
<p style="clear:both">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
</body>
</html>
위 이미지는 float 설정이 적용되어서 텍스트와 같이 나타나고, 아래 이미지는 float 속성이 적용되었지만 clear 속성으로 무력화되어서 기존의 html처럼 같은 줄에 텍스트와 이미지가 나타나지 않고 있다.
2. holy grail layout
: '최적의 구현' 이라는 의미로, 웹사이트를 가장 잘 나타내는 구현 방식을 찾는 것은 매우 어렵다는 뜻에서 나온 말인 듯
보통 웹사이트는 이런 식의 구현을 많이 사용하는데, 이는 기존의 HTML 태그만을 사용해서는 불가능했고, CSS에 와서야 float, clear 등의 속성을 이용하면서 가능해졌다.
* 창의 사이즈에 따라서 레이아웃의 크기가 자동 조절되는 것도 바람직하지만, 아직은 구현할 수 없다.
* 이때 border의 두께 값이 전체 테두리에 포함되지 않는다. 이를 고려해야 한다.
(페이지 우클릭 -> 검사 에서 각 영역의 width, border width를 확인할 수 있지만 너무 번거롭다.
=> box-sizing 방법은 border width를 각 영역의 width를 더할 때 같이 포함시키는 방법을 알려준다.)
ex) 한 영역의 너비가 300px, border가 50px이면 총 너비는 350px이므로 주의해야 한다.
* flex : 창의 넓이 등 다양한 변화 상황에서 레이아웃을 좀 더 쉽게 짤 수 있도록 도와준다. [심화과정]
* margin:auto 로 설정하면 해당 element를 가운데 정렬시키는 것과 같은 효과를 낼 수 있다!
<실습>
<html>
<head>
<meta charset="utf-8">
<title>Holy Grail Layout</title>
<style>
h1{text-align:center ; background-color:black ; color:white}
.fix{width:700px ; border:1px solid black ; margin:auto}
header{border-bottom:1px solid black ; text-align:center}
nav{float:left ; border-right:1px solid black ; margin-right:0px ; width:150px ; padding:10px}
article{float:left ; border-left:1px solid black ; border-right:1px solid black ; width:350px ; margin-left:-1px ; margin-right: 0px ; padding:20px }
aside{float:left ; border-left:1px solid black ; width:100px ; padding:10px ; margin-left:0px}
footer{clear:both ; border-top:1px solid black ; padding:20px ; text-align:center}
</style>
</head>
<body>
<div class="fix">
<header><h1>Italian Food</h1><p>Qui eos a aut cum obcaecati sint sit, laborum. Autem, in neque.</p></header>
<nav><ul>
<li>Pasta</li>
<li>Pizza</li>
<li>Risotto</li>
<li>Salad</li>
<li>Steak</li>
</ul></nav>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid numquam iusto fugit quia ea ipsum sint earum alias tempore quibusdam, voluptatibus suscipit nisi, saepe et adipisci amet. Deleniti vitae nisi, ullam quod voluptatum doloremque facilis corrupti omnis, consequuntur blanditiis cupiditate itaque voluptatem minima odit quo soluta id sapiente! Voluptate dolore fuga autem sit omnis, consequatur quia pariatur qui non tenetur eum expedita provident a nisi repellat iste, sequi accusamus maiores molestias et labore ratione illo, minus perspiciatis. Architecto nemo itaque facilis nam excepturi reiciendis nostrum ducimus sunt rerum. Doloremque quidem veniam rem delectus, facere aliquam nam nemo quisquam? Laborum eos qui voluptatem, culpa amet officia in dicta, quibusdam numquam modi at repellendus fugiat est consequuntur porro illum dignissimos maiores deleniti? Deserunt assumenda dolorem provident fugiat, natus, modi facere itaque amet ipsum, omnis dolore, animi quis sed atque consectetur magni.</p><p> Accusantium ab numquam adipisci doloremque necessitatibus fugit minima, illum totam odit veniam ducimus voluptatem sunt tempora, culpa voluptates commodi vitae consequuntur ipsum dicta! Pariatur, voluptates, velit. Deserunt tenetur eum autem suscipit harum sequi reprehenderit totam officiis, quis corporis nam, exercitationem ut fugiat aperiam consequatur dicta eaque omnis qui quas, aut porro dolores a. Quos necessitatibus eius illum nesciunt et, fugit itaque est provident sunt eligendi non animi corporis officiis atque modi dolores nulla nemo, numquam excepturi, consectetur.</p><p> Asperiores, nihil excepturi. Nesciunt tenetur eaque voluptatem deleniti aperiam quisquam accusantium, maxime placeat voluptates velit expedita, cumque, obcaecati, quae repellendus. Et nulla, in cum nisi itaque ea, doloremque magnam deleniti dolore doloribus asperiores nobis ipsa aliquam corporis vero, rerum, hic accusamus.</p><p> Laborum provident cupiditate harum perferendis voluptate fuga laudantium animi et tenetur veniam, vitae maxime distinctio doloribus quisquam delectus unde tempora, sunt nam recusandae a saepe inventore. Minima, saepe. Culpa repellat qui totam similique earum aspernatur molestiae debitis atque aperiam vitae in excepturi expedita veniam adipisci, velit voluptatibus exercitationem asperiores nostrum quod distinctio. Alias, consectetur sed optio voluptatum recusandae, aliquid repellat deserunt consequuntur delectus vero, exercitationem facere quidem. Perspiciatis reprehenderit omnis sit ducimus voluptates, quasi recusandae a, eligendi, maiores labore ipsam natus laborum vero at dicta. Ipsa velit dolor quis asperiores illum obcaecati repudiandae dicta magni, adipisci fugit voluptate eaque, quos, assumenda aut. Nisi quas velit nihil voluptate culpa qui architecto, voluptatibus, esse minima corporis dicta pariatur eius. Amet corporis necessitatibus quia, inventore neque!</p><p> Voluptatem rem id architecto sed animi libero asperiores officia reprehenderit! Quae accusamus illo beatae et dignissimos dolore sed optio eligendi amet. Aliquam architecto ipsam facilis, exercitationem laboriosam dolor mollitia suscipit. Fugit quo, eum possimus. Corporis officiis, rerum facere sequi dolore sed iste, mollitia praesentium repellendus ratione est tenetur. Molestiae iure beatae, delectus quasi, ipsum at! Quasi eius minus ex, minima rem voluptates velit, non deleniti voluptas error, modi possimus qui iusto numquam vero, sed maiores! Nostrum, illo magnam iusto architecto id esse voluptatum repellat! Impedit fugiat quidem esse itaque. Hic inventore voluptatem id dolorem esse, voluptas perferendis, facilis autem voluptates nesciunt commodi ab dignissimos accusantium qui ex sequi tempora numquam, consequatur et nulla itaque non neque eius deserunt? Eveniet, necessitatibus.</p></article>
<aside> Nisi perferendis pariatur provident, blanditiis aliquam aspernatur expedita earum sit eos rerum voluptates vero, soluta laborum necessitatibus beatae non sequi nobis recusandae.</aside>
<footer>Molestias nisi vitae officia id, explicabo praesentium!</footer>
</div>
</body>
</html>
