25. 다단(multi column)

다단(multi column)은 아래 신문처럼 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다.


먼저 column-count 속성을 2로 주게되면?

multi-column.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        .column
            text-align: justify;
            column-count:2;
/*            column-width: 200px;*/
       
</style>
</head>
<body>
<div class="column">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eius nostrum adipisci in ad sed vel, illo quibus-dam quas perspiciatis aliquam magnam consectetur quisquam totam. Reprehenderit porro architecto est num-quam repellendus odit modi commodi, quis aut, quaerat asperiores aliquid maiores consectetur. Obcaecati accu-samus excepturi commodi eum facilis vitae vel exercitationem! Quia obcaecati aliquam error labore numquam animi fugiat mollitia unde inventore molestiae soluta nam temporibus amet est, ullam officiis iure fugit. Delectus vel, alias non mollitia nulla, itaque magnam consectetur. Iste a, officia, iure tempore incidunt laborum quas placeat itaque error accusamus libero voluptatum velit fugiat distinctio saepe nemo ipsum.
</div>
</body>
</html>

실행 화면


다음과 같이 컬럼이 2개로 분할됩니다.


만약 다음과 같이 column-width를 200px로 주게 되면 200px로 컬럼을 나누게 됩니다.

실행 화면

만약 column-count와 column-width를 둘 다 주면 어떻게 될까요?

최대 4개의 컬럼까지 만들어지고 컬럼의 width가 200px보다 작아지게 되면 컬럼의 수를 줄이게 됩니다.

이번에는 column-gap과 column-rule-style을 알아봅시다. gap은 컬럼사이의 간격을 의미하고 rule-style은 컬럼사이의 뭐를 넣을지 정할 수 있습니다.


실행 화면은 다음과 같습니다.
 

만약 다음과 같이 column-rule-width와 column-rule-color를 지정하면 컬럼 사이의 선에 대한 스타일을 지정할 수 있습니다.


그리고 column-span:all옵션은 컬럼이 나뉜것을 무시하고 쭉 길게 쓰고 싶을 때 사용합니다.


column-span:all 적용 후 컬럼을 무시하고 제목을 작성하게 됩니다.

블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS, HTML
21 Float
  Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다.

1) Float효과란?
  Float가 어떤 효과인지 확인하기 위해서 다음 예제를 봅시다.

float.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        img
            width:300px;
            float:left;
       
</style>
</head>
<body>
<img src="sample.jpg" alt="">
<p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas possimus enim fuga nostrum as-sumenda cum sunt, iste quibusdam maxime, sequi, recusandae aut quisquam ab nisi nobis! Est voluptatem cum-que, nemo quasi nihil eaque eius delectus qui nesciunt harum vel natus sit veniam nisi animi velit assumenda. Nulla asperiores obcaecati, rem eos earum explicabo facere quaerat, assumenda, beatae distinctio hic cum quas est non nam nobis praesentium consectetur ratione possimus accusantium. Voluptate vel eligendi cupiditate tenetur commodi dignissimos nemo quo nesciunt vitae, rem, optio a reiciendis doloribus quia enim excepturi eius molestiae ullam perspiciatis iusto porro et non maxime fuga.  
</p>
</body>
</html>

실행 화면

float 효과를 주기전

float 효과를 준 후

만약 다음과 같이 윗처럼 이미지를 피해가는 것이 아닌 즉 float를 무시하고싶다면

p태그에 style을 clear:both로 지정하면 됩니다.

2) float를 활용한 성배 레이아웃(holy grail layout)

다음과 같인 시멘틱 태그 모양의 레이아웃을 구성해봅시다.
기본 베이스 코드는 다음과 같습니다.

float-holylayout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<header>
<h1>
            CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut consectetur temporibus eaque odit dolores omnis corporis perferendis, quasi illum sunt magnam quibusdam, molestiae amet nam beatae culpa natus voluptatum eligendi.
</article>
<aside>
        ad
</aside>
<footer>
        copyleft
</footer>
</body>
</html>

실행 화면

이것을 성배 레이아웃으로 바꿔봅시다.

float-holylayout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        *
            box-sizing: border-box;
       
        .container
        /*모두 감싸서 전체 크기를 정의해주면 레이아웃 width가 변경되도 UI가 안깨짐 */
            width:540px;
            border:1px solid gray;
            margin:auto;
       
        header
            border-bottom: 1px solid gray;
       
        nav
            float:left;
            width:120px;
            border-right:1px solid gray;
       
        article
            float:left;
            width:300px;
            border-left:1px solid gray;
            border-right:1px solid gray;
            margin-left:-1px;
       
        aside
            float:left;
            width:120px;
            border-left:1px solid gray;
            margin-left:-1px;
       
        footer
            clear:both;
            border-top:1px solid gray;
            text-align: center;
            padding:20px;
       
</style>
</head>
<body>
<div class="container">
<header>
<h1>
                CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut consectetur temporibus eaque odit dolores omnis corporis perferendis, quasi illum sunt magnam quibusdam, molestiae amet nam beatae culpa natus voluptatum eligendi.
</article>
<aside>
            ad
</aside>
<footer>
            copyleft
</footer>
</div>
</body>
</html>

실행 화면
  아래와 같이 성배 레이아웃 스타일로 꾸며졌습니다. box-sizing을 border-box로 해야만 레이아웃이 안 깨지는 것을 유의합시다.


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

20.Media Query
1) 소개
  media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다.

media-query.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
        @media (min-width:601px)
            body
                background-color: blue;
           
         
        @media (max-width:600px)
            body
                background-color: green;
           
         
        @media (max-width:500px)
            body
                background-color: red;
           
         
</style>
</head>
<body>
    500px 이하 : red
    501~600px : green
    601px 이상 : blue
</body>
</html>
실행화면
  다음과 같이 넓이에 따라 배경색이 바뀌게 됩니다. 
여기서 유의할 것은 캐스케이드 룰 때문에 가장 마지막에 지정한 것이 500px이하일 때인 것입니다.
 맨처음은 600px이상으로 지정해야 정상적으로 동작합니다.


2) 미디어 쿼리 응용
  화면의 크기를 줄이면 레이아웃이 바뀌는 홈페이지를 만들어봅시다.
여기서 캐스케이드 룰에 의해서 적용되는 스타일의 순서를 바꿔주는 것에 유의합시다.

media-query2.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
          .container
              display: flex;
              flex-direction: column;
         
          header
              border-bottom:1px solid gray;
              padding-left: 20px;
         
          footer
              border-top:1px solid gray;
              padding: 20px;
              text-align: center;
         
          .content
              display: flex;
         
          .content nav
              border-right:1px solid gray;
         
          .content aside
              border-left:1px solid gray;
         
          @media(max-width:500px)
              .content
                  flex-direction:column;
               
              .content nav .content aside
                   border: none;
                   flex-basis: auto;
              
              main
                  order:0;
             
              nav
                  order:1;
             
              aside
                  order:2;
                  display: none;
             
         
          nav, aside
              flex-basis: 150px;
              flex-shrink: 0;
         
          main
              padding: 10px;
         
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
                css 수업 중입니다.
</main>
<aside><!--광고 태그-->
                AD
</aside>
</section>
<footer>
<a href="http://www.naver.com";>홈페이지</a>
</footer>
</div>
</body>
</html>

실행 화면

처음에는 다음과 같이 성배형으로 구성되어 있습니다.


하지만 화면이 500px보다 작아지면 다음과 같이 flex-display가 column으로 바뀝니다.



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

22.flex
CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다.
이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요.

1) flex의 기본
flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다.

flex-basic1.html (doctyle html이 아닌 doctype임을 유의)
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8">
<style>
          .container
              background-color:powderblue;
              display:flex;
/*              flex-direction:row-reverse;*/
         
          .item
              background-color: tomato;
              color:white;
              border:1px solid white;
         
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>

실행 화면


실행하면 블록레벨 엘리먼트가 아닌 인라인 엘리먼트가 됩니다.
만약 다음과 같이  flex-direction:row-reverse;를 추가하면


아래와 같이 순서가 뒤바뀌면서 오른쪽 정렬로 됩니다.


flex-direction의 디폴트는 row이다. row로 바꾸면 다시 원래대로 돌아갑니다.
아래는 flex-direction: column을 했을 때입니다.

실행 화면


다음과 같이 flex-direction:column-reverse로 한다면


아래와 같이 column방향으로 방향이 반대순서로 나타나게 됩니다.


결론적으로 flex-direction은 글자의 방향이 row로 할껀지 아니면 column으로 할껀지 결정하는 것입니다.

2) grow & shrink
아이템은 컨테이너의 크기에 따라서 작아지기도 하고 커지기도 합니다. 이 때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink입니다. 여기서는 이 속성들에 대해서 알아보겠습니다.

flex-grow-shrink.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
          .container
              background-color:powderblue;
              height:200px;
              display:flex;
              flex-direction:row;
         
          .item
              background-color: tomato;
              color:white;
              border:1px solid white;
         
          .item:nth-child(2)
              flex-basis: 200px;
           /*2번째 아이템만 엘리먼트의 크기를 200px로 적용하게 함 */
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>

실행 화면
flex-basis옵션을 주면 flex방향에 해당하는 곳으로 넓이를 주는 옵션이다. 아래는 2번째만 flex-basis옵션이 적용된 것을 볼 수 있습니다.

item클래스에 flex-grow 옵션을 1로 주게 되면 모두 균일하게 n빵해서 영역을 나눠갖게 됩니다.

아래와 같이 균일하게 나눠갖게 됩니다.


만약 아래와 같이 2번째 아이템에만 2의 weight를 주고 싶다면 아래와 같이 .item:nth-child(2)에 flex-grow를 2로 주면 됩니다.


이번에는 shrink에 대해서 알아봅시다.
1번째 아이템에만 shrink를 0으로 적용하고 나머지는 그냥 둔 상태입니다.

flex-grow-shrink.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
          .container
              background-color:powderblue;
              height:200px;
              display:flex;
              flex-direction:row;
         
          .item
              background-color: tomato;
              color:white;
              border:1px solid white;
         
          .item:nth-child(1)
              flex-basis: 200px;
              flex-shrink:0;
         
          .item:nth-child(2)
              flex-basis: 300px;
          
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>

실행 화면


이 상태에서 넓이를 줄여보면 아래와 같이 2번의 넓이는 줄어들지만 1번의 넓이는 고정되어 있습니다. 즉 shrink를 0으로 주면 넓이를 고정시키겠다는 의미입니다.


아래와 같이 1번이 shrink를 1로 두고 2번을 shrink를 2로 두면 1번은 1/3만큼의 넓이를 줄일 수 있고 2번은 2/3만큼의 넓이는 줄일 수 있게 된다.


넓이를 줄이기 전


넓이를 줄인 후

3) Holy Grail layout

  Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다.
이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. flex는 아주 세련된 방법으로 이 문제를 간편하게 해결합니다. 여기서는 플랙스를 이용해서 성배 레이아웃을 만드는 법을 알아봅니다.


flex-holy.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style>
          .container
              display: flex;
              flex-direction: column;
         
          header
              border-bottom:1px solid gray;
              padding-left: 20px;
         
          footer
              border-top:1px solid gray;
              padding: 20px;
              text-align: center;
         
          .content
              display:flex;
         
          .content nav
              border-right:1px solid gray;
         
          .content aside
              border-left:1px solid gray;
         
          nav, aside
              flex-basis: 150px;
              flex-shrink: 0;
         
          main
              padding: 10px;
         
</style>
</head>
<body>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
                css 수업 중입니다.
</main>
<aside><!--광고 태그-->
                AD
</aside>
</section>
<footer>
<a href="http://www.naver.com";>홈페이지</a>
</footer>
</div>
</body>
</html>

실행 화면
여기서 핵심은 content의 nav와 aside를 고정시키기 위해서 flex-shrink 0으로 주었고 main만 줄어들게 만들었다는 점입니다.


4) flex 여러 속성들
align-items : 수직 방향에 대한 정렬
justify-content : 수평 방향에 대한 정렬
align-content : 같은 행을 그룹이라고 한다면 그룹과 그룹사이의 정렬
align-self : 특정한 것만 예외적으로 정렬할 때
order : 아이템들간의 순서를 바꾸고자 할 때 씀



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS, HTML
18.포지션

엘리먼트의 위치를 지정하는 4가지 방법이 있습니다.
- static : 기본값으로 위치정보를 임의로 설정해줄 수 없습니다..
- relative : 상대위치로, static 위치 사용 시 있던 위치를 기준으로 이동합니다.
- absolute : 절대위치로, 문서 최좌측 상단을 기준으로 위치 정보를 설정하며 스크롤시 이동합니다.
- fixed : 위치 고정으로 스크롤과 상관없이 항상 문서 최좌측 상단을 기준으로 좌표가 설정됩니다.

이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다.

엘리먼트의 위치를 정하는 속성 position 속성 값 4가지

1. static(기본값) : 움직이지 않고 정적인 상태
2. relative : 부모 엘리먼트를 기준으로 상대적으로 움직입니다.
3. absolute : position값이 relative인 부모를 기준으로 (없다면 웹페이지의 가장 가장자리 기준) 움직입니다.
* 자식의 위치 값이 absolute이면 부모와의 관계가 끊기고 그래서 자신의 크기가 딱 컨텐츠만해집니다.
그리고 값을 아예 없애면 원래 위치로 돌아갑니다.
4. fixed : 스크롤을 움직여도 지정된 위치에 고정됩니다.
* absolute와 마찬가지로 부모와의 관계가 끊기고 크기는 자신의 컨텐츠만 해집니다.

1) static vs relative

position_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
       html
           border: 1px solid gray;
         
        div
            border: 5px solid tomato;
            margin: 10px
       
        #me
            position: relative;
            left:100px;
            top:100px;
            bottom:100px;
       
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
        parent
<div id="me">me</div>
</div>
</body>
</html>

실행화면

position을relative로 지정한 뒤 left right를 둘 다 지정해도left만 따르게 되고 top과 bottom을 지정하면 top만 따르게 됩니다.
만약 다음과 같이 position: relative를 삭제한 뒤 다시 실행해보면


position_1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
       html
           border: 1px solid gray;
         
        div
            border: 5px solid tomato;
            margin: 10px
       
        #me
            left:100px;
            top:100px;
            bottom:100px;
       
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
        parent
<div id="me">me</div>
</div>
</body>
</html>

실행화면

아래와 같이 left와top값이 무시되었음을 알 수 있습니다.
기본적으로 position은 static값으로 지정되어 있습니다. 하지만 position을 relative로 바꾸면 부모 엘리먼트에서 상대적으로 위치를 지정하게 됩니다.

2) absolute

position_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
       #parent, #other
           border: 5px solid tomato;
        
        #me
            background-color: black;
            color:white;
            position: absolute;
            left: 0px;
            top: 0px;
       
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
        parent
<div id="me">me</div>
</div>
</body>
</html>

실행화면

다음과 같이 me는 absolute로 포지션이 지정되었으므로 최좌측상단을 기준으로 위치가 지정됬음을 알 수 있습니다.
만약 다음 예제와 같이 static이 아닌 relative 부모를 만들어보고 다시 실행해봅시다.

position_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
       #parent, #other
           border: 5px solid tomato;
       
        #grand
            position: relative;
       
        #me
            background-color: black;
            color:white;
            position: absolute;
            left: 0px;
            top: 0px;
       
</style>
</head>
<body>
<div id="other">other</div>
<div id="grand">
<div id="parent">
            parent
<div id="me">me</div>
</div>
</div>
</body>
</html>

실행화면

아래와 같이 grand가 relative이므로 최좌측상단이 기준이 아닌 grand를 기준으로 위치가 결정됩니다.

3) fixed

fixed포지션을 위해서 다음과 같이 fixed속성을 적용한 예제를 실행시켜 봅시다.

position_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
       #parent, #other
           border: 5px solid tomato;
       
        #large
            height:10000px;
            background-color: tomato;
       
        #me
            background-color: black;
            color:white;
            position: fixed;
            left: 0px;
            top: 0px;
       
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
            parent
<div id="me">me</div>
</div>
<div id="large">
</div>
</body>
</html>

실행화면


실행시켜 보면 absolute속성과 비슷해보입니다.. 하지만 스크롤을 해보면


아래와 같이 fixed가 적용된 엘리먼트는 계속 고정되어있습니다. 즉 스크롤로부터 독립되어 있습니다.

아래와 같은 소스를 이용하면 다음과 같이 계속 따라 다니는 배너 광고처럼 만들 수 있습니다.


position_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        body
            padding-top:30px;
       
       #parent, #other
           border: 5px solid tomato;
       
        #large
            height:10000px;
            background-color: tomato;
       
        #me
            background-color: black;
            color:white;
            position: fixed;
            left: 0px;
            top: 0px;
            width:100%;
            height:30px;
            text-align: center;
       
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
            parent
<div id="me">me</div>
</div>
<div id="large"></div>
</body>
</html>


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS, HTML
20.마진 겹침 현상

마진겹침(margin-collapsing) 현상은 상하마진값이 어떤 상황에서 사라지는 현상을 의미합

니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 

하지만 이것을 이해하지 못하면 실무를 할 때 이해 할 수 없는 CSS의 동작으로 인해서 깊은

화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다.

1) 마진 겹침 현상 1번째

다음과 같이 소스를 작성한 뒤 실행해보고 크롬 개발자 도구를 이용해서 margin 값을 살펴봅시다.

margin-collapsing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        h1
            border:1px solid red;
            margin:100px;
       
</style>
</head>
<body>
<h1>hello world</h1>
<h1>hello world</h1>
</body>
</html>

실행화면

아래와 같이 실행 되었습니다.


하지만 자세히 살펴보면 아래와 같이 margin이 겹친 것을 알 수 있습니다.
위, 아래 엘리먼트들의 마진이 겹칠 시 둘 중 마진이 큰 쪽이 둘 사이의 마진이 됩니다.

2) 마진 겹침 현상 2번째

margin-collapsing2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        #parent
/*            border:1px solid tomato;*/
            margin-top:100px;
       
        #child
            background-color: powderblue;
            margin-top:50px;
       
</style>
</head>
<body>
<div id="parent">
<div id="child">hello world</div>
</div>
</body>
</html>

실행화면
아래와 같이 실행되는데 만약 위의 주석 부분을 지운다면?

hello world의 위치가 바뀐 것을 볼 수 있습니다.

border를 지운 후 크롬 개발자 도구에서 margin-top값을 바꿔보면 100px까지는 안 움직이다가 100px이 넘는 순간 hello world의 위치가 바뀜을 알 수 있습니다.

즉 부모, 자식 엘리먼트 사이에서 부모의 시각적 요소가 없어지면 부모, 자식 마진 중에 큰 

쪽이 자식의마진처럼 사용됩니다.

3) 마진겹침현상 3번째

margin-collapsing3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        #empty
            margin-top:50px;
            margin-bottom:100px;
            border:1px solid tomato;
       
        #normal
            background-color:powderblue;
            margin-top: 100px;
       
</style>
</head>
<body>
<div id="empty">
</div>
<div id="normal">
        normal
</div>
</body>
</html>

실행화면

위의 소스를 실행하면 다음과 같이 됩니다.


여기서 id가 empty인 div의 border를 주석 처리하고 다시 실행해보면 아래와 같이 normal

의 값이 위치가 바뀝니다.

크롬 개발자 도구를 이용해서 아이디가 empty인 마진의 값을 바꿔보면 margin-top의 값이 

100px이 넘어야 변화가 생깁니다.

즉, empty의 시각적인 요소들이 없어지면 margin-top과 margin-bottom중 큰 값이 empty

의 마진 값이된다는 의미입니다.


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

19. box-sizing

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다.
width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다.
따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정 할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다.

box_sizing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        div
            margin: 10px;
            width: 150px;
       
        #small
            border: 10px solid black;
       
        #large
            border: 30px solid black;
       
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>

실행화면


다음과 같이 뜨지만width값을 150px로 지정했음에도 불구하고 두 개의 태그가 넓이가 다릅니다.
이유는 다음과 같이 box-sizing이라는 속성이 디폴트로 content-box로 지정되었기 때문이다.
이 값은 콘텐츠의 넓이가 150px로 지정해라는 뜻입니다.
box-sizing을border-box로 바꾸면 아래와 같이 넓이가 같아집니다.


아래와 같이style에서 * 로 지정을 하면box-sizing의 기본 디폴트를 border-box로 할 수 있습니다.

boxsizing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        *
            box-sizing:border-box;
       
        div
            margin: 10px;
            width: 150px;
       
        #small
            border: 10px solid black;
       
        #large
            border: 30px solid black;
       
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>

실행화면




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

18. 박스 모델

박스모델은 아래에서 보면 margin-top, margin-left, width, padding-left 등 왠만한 요소들이 모두 박스모델과 관련이 있다.


box.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        p, a
            border:10px solid red;
            padding: 20px;
            margin: 40px;
            width: 120px;
       
</style>
</head>
<body>
<p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum!
</p>
<p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum!
</p>
안녕하세요<a href="http://www.naver.com">네이버</a>입니다.
</body>
</html>

실행화면

a태그는 인라인 방식으로 width와 height 값이 적용되지 않는다. 블록엘리먼트만 적용된다.

출처 : https://opentutorials.org/course/2418/13404


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
14. 레이아웃 인라인 vs 블럭레벨
html 엘리먼트들은 크게 두 가지로 구분됩니다.

1) 화면 전체를 사용하는 태그 => block element
2) 화면의 일부를 차지하는 태그 => inline level element
이번 시간에는 인라인 엘리먼트와 블럭 레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서display라는 중요한 속성에 대해서도 배우게 됩니다.

block1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        h1, aborder: 1px solid red; 
</style>
</head>
<body>
<h1>hello world</h1>
안녕하세요. <a href="https://opentutorials.org";>생활코딩입니다.</a>
</body>
</html>

실행화면
아래에서 h1태그는 한 줄을 다 쓰고 a태그는 해당하는 컨텐츠만 쓰고 있습니다.
즉, h1태그는 블록 엘리먼트이고 a 태그는 인라인 레벨 엘리먼트입니다.

만약 style에서 display 속성을 아래와 같이 바꾸면

block_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1, aborder: 1px solid red;
h1display: inline;
adisplay:block;
</style>
</head>
<body>
<h1>hello world</h1>
안녕하세요. <a href="https://opentutorials.org";>생활코딩입니다.</a>
</body>
</html>

실행화면
아래와 같이 블록 엘리먼트였던 h1 태그가 인라인으로 되고 인라인 엘리먼트였던 a태그가 블록 엘리먼트도 된 것을 볼 수 있습니다.
 




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
13. bracket 도구사용법

지금부터 수업에서 bracket을 사용하려고 합니다. bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다. 하지만 이 도구는 코딩을 편리하게 해줄뿐 우리 수업의 내용과는 직접적인 연관은 없기 때문에 보셔도 좋고 안보셔도 전혀 문제되지 않습니다.
brackets.io 홈피에 가면 다음과 같이 툴을 다운 받을 수 있습니다.


이 프로그램의 킬러 콘텐츠는 빠른 편집입니다.
body 태그에서 위와 같이 오른쪽 마우스 버튼을 누르고 빠른 편집을 누르면 아래와 같이 body 태그에 적용된 css를 바로수정 할 수 있습니다.


그 다음 오른쪽에 레고 블럭 같은 아이콘을 클릭한 뒤


아래와 같이emmet을 검색하고 설치해봅시다.


그 다음 파일을 생성하고 아래와 같이 html을 작성한 뒤 탭키를 누르면


아래와 같이 자동으로 브라켓(괄호)가 생성됨을 알 수 있습니다.


또한 아래와 같이 li*3 을 치고 탭 키를 누르면


li태그가 3개가 생성됨을 알 수 있습니다.


그리고 다음과 같이 작성 후 탭키를 누르면


아래와 같이 작성됨을 알 수 있습니다.


사실 이 기능은https://docs.emmet.io/abbreviations/syntax/에 있는 emmet이라는 모듈의 기능입니다. 위 사이트를 통해서 다양한 기능을 알아보는 것도 좋습니다.


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
12. 캐스캐이딩
캐스케이드는 폭포라는 의미가 있습니다. 처음html이등장했을 때는CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의고안자들은html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이CSS입니다.
 
CSS는Cascading Style Sheet의 약자입니다. Cascading은CSS의 첫 번째 글자로 등장 할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다. Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다.
 
즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각됩니다. 여기서는 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선 순위를 어떻게 설정하는가에 대한 규칙인 캐스캐이딩에 대해서 알아봅니다.
 
1) 캐스캐이딩이란?
만약 아래와 같이id가 idsel인li태그에서 다음과 같이 여러개의 스타일이 주어졌다면 과연 어떤 것이 적용될까?
 
cascading_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
      licolor:red;
      #idselcolor:blue;
      .classselcolor:green;
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel"
      style="color:powderblue">css</li>
</ul>
</body>
</html>
실행 결과

다음과 같이 실행됨을 알 수 있습니다. 즉, 인라인에style을 준 것이 적용됬음을 알 수 있습니다.
결국 인라인style <id선택자 < 클래스 선택자 < 태그 선택자순으로 적용됩니다.
이유는 선택자들이 선택하는 범위입니다. 선택하는 범위가 좁을수록 먼저 적용되는 규칙을 가집니다.

 
만약 이러한 적용 순서를 깨고 싶다면 위와 같이 !important를 붙이면 됩니다.

 
블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
12. 웹폰트

웹폰트란?
웹폰트는 사용자가 가지고 있지않은 폰트를 웹페이지에서 사용할 수 있는 방법입니다. 폰트를 서버에서 다운로드하는 방식이라고 할 수 있습니다.
본 수업에서는 구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용해서 웹폰트를 설명합니다.
구글 폰트 사이트에서 다음과 같이 선택하면 link주소와 font-family 적용법이
나옵니다.


web_font.html
<!DOCTYPE html>
<html>
<head>
<style>
      #font1
        font-family: 'Open Sans Condensed', sans-serif;
     
      #font2
        font-family: 'Indie Flower', cursive;
     
</style>
</head>
<body>
<pid="font1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui eget lorem aliquet finibus.
</p>
<pid="font2">
      Quisque nec arcu felis. Vestibulum gravida, augue eu facilisis tempus, neque erat tincidunt nunc, consequat ultrices felis urna eu augue. Nulla ut urna purus. Curabitur ultricies rutrum orci malesuada tempor.
</p>
</body>
</html>



web font generator를 이용해서 컴퓨터에 저장된 파일을 업로드 해서 웹폰트를 생성할 수 있습니다.
다운로드를 받으면 다음과 같은 파일들이 생성됩니다.


그리고 preview.html를 보면 다음과 같은 소스를 볼 수 있습니다.


아래와 같이 font-family 에 @font-face의 값과 동일하게 하면 만든 웹폰트를 사용할 수 있습니다.




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
11. 서체
1) 고정폭과 가변폭
서체는 크게 두가지 방법으로 구분할 수 있습니다. 고정폭(monospaced)과 가변폭입니다. 아래는 두가지 방식의 차이를 보여주는 이미지 입니다. 


2) serif vs sans serif
serif는 글꼴에서 사용하는 장식을 의미합니다. sans는 부정의 표현입니다. 즉 sans serif는 serif가 아니다는 뜻입니다.  


 
3) 폰트 랭킹
많이 사용하는 폰트의 랭킹을 알려주는 사이트가 있습니다. 이 사이트를 통해서 가장 많이 사용하는 폰트는 무엇인지를 알아보는 것도 재미있을 것 같습니다. 
 
 
4) 국내폰트
네이버에서 운영하는 국내 자료실입니다. 무료폰트를 다운로드 받을 수 있습니다. 


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
10. font



1) font-family
font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다.
h1{
    font-family: "Times New Roman", Times, serif;
}
 
위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용하게 됩니다.
 
이때 마지막 폰트는 포괄적인 폰트로 지정합니다. 아래와 같은 것이 있습니다. 
 
serif (장식이있는폰트)
sans-serif
cursive (흘림체)
fantasy
monospace (고정폭)
2) font-weight
폰트의 두께를 나타냅니다. 대체로 bold만 기억하시면 됩니다. bold를 사용하면 폰트가 두껍게 표시됩니다. 
 
h1{
    font-weight: bold;
}
 
3) line-height
행과 행 사이의 간격을 지정합니다. 기본값은 normal로 수치로는 1.2에 해당합니다. 이 수치를 기준으로 간격을 조정하면 됩니다. 값이 1.2라면 현재 엘리먼트 폰트 크기의 1.2배만큼 간격을 준다는 의미입니다.
 
p{
    line-height: 1.3;
}
 
4) font
폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다. 형식은 아래와 같습니다. 순서를 지켜서 기술하셔야 합니다.
 
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
 
이 중에서 font-size font-size font-family는 필수로 포함되어야 하는 정보입니다.
 
h1{
    font: 15px arial, sans-serif;
}
 
 
 
font_family.html
<!DOCTYPE html>
<html>
<head>
<style>
      #type1{
        font-size:5rem;
        font-family: arial, verdana, "Helvetica Neue", serif;
        font-weight: bold;
        line-height: 2;
      }
      #type2{
        font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
      }
</style>
</head>
<body>
<pid="type1">
      Hello world<br>
      Hello world
</p>
<pid="type2">
      Hello world<br>
      Hello world
</p>
</body>
</html>



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
8. color
문자 컬러를 설정할 사용한다.

color.html
<!DOCTYPE html>
<html>
<head>
<style>
      h1{color:#00FF00;}
혹은 {color:rgb(0,255,0)} 으로해도됨.
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

9. text-align
text-align의값으로올수있는값은아래와같습니다

left : 왼쪽정렬
right : 오른쪽정렬
center : 가운데정렬
justify : 균등정렬

text_align.html
<!DOCTYPE html>
<html>
<head>
<style>
      p{
        text-align: justify;
        border:1px solid gray;
      }
</style>
</head>
<body>
<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem elementum mi, non congue metus urna vitae tortor. Duis dictum ipsum non neque elementum iaculis. Sed sodales purus nisl, gravida pellentesque metus vehicula vitae. Suspendisse sed justo ut lorem molestie consectetur. Nullam efficitur quis velit ut scelerisque. Integer at velit pharetra neque efficitur varius.

</p>
</body>
</html>

실행 화면
justify 다음과 같이 양쪽에 균등하게 분배됨을 있다.




블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
7. font-size

글꼴의 크기를 지정합니다. 주요 단위로는 px, em, rem이 있습니다.

      1. rem
html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요.
 
      1. px
모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다.
 
      1. em
부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다.

예제. font_size.html
<!DOCTYPE html>
<html>
<head>
<style>
      #pxfont-size:16px;
      #remfont-size:1rem;
</style>
</head>
<body>
<divid="px">PX</div>
<divid="rem">REM</div>
</body>
</html>

실행 화면

다음과 같이 출력됨을 알 수 있습니다.


다음과 같이 크롬 세팅에서 사용자의 폰트를 변경하면 PX는 변경이 안되고 REM은 변경됩니다.



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
6. 속성을 공부하는 방법

    1. 중요한 속성들

CSS의 효과 다른 말로 속성(property)는 약 250개 정도입니다. 일상 생활에서 사용하는 자연어의 어휘에 비하면 몇개 되지 않지만, 이것들을 하나씩 열거해서 공부하는 것은 뇌를 혹사시는 일입니다.

우리 수업에서 제시하는 공부방법은 가장 빈도수가 높은 CSS의 속성 순으로 공부하고, 빈도가 낮은 것들은 그런 것이 있다는 정도만 확인하고 필요할 때 검색, 질문 등을 이용하는 것입니다.

    1. 속성에 대한 통계

과학적인 방법으로 빈도수를 조사하기 위해서 마이크로소프트에서 검색엔진 bing.com을 통해서 수집한 전세계 웹페이지의 통계 자료를 인용하겠습니다.

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/


이 자료에 따르면 가장 빈도수가 높은 속성은 아래와 같습니다.

앞으로 배울 내용은 이 순서에 따라서 수업을 진행하겠습니다.

HTML의 통계가 궁금한 분은 아래 구글의 통계의 근거한 자료를 살펴보세요.



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
5. 가상 클래스 선택자

1. 소개

가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼

여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다.
 
ex_css_5.html
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<style>
      a:link
        color:black;
     
      a:visited
        color:red;
     
      a:hover
        color:yellow;
     
      a:active
        color:green;
     
      a:focus
        color:white;
     
</style>
</head>
<body>
<ahref="https://opentutorials.org">방문함</a>
<ahref="https://a.a">방문안함</a>
</body>
</html>

실행 화면

마우스를 갖다대면 다음과 같이 노란색이 됩니다.



탭을 눌러서 포커스를 주면 다음과 같이 하얀색 박스처리가 됩니다. 이러한 처리를 하는 것을 가상 클래스 선택자라고 합니다.


링크와 관련된 가상 클래스 선택자
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
 
위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다.
 
- color
- background-color
- border-color
- outline-color
- The color parts of the fill and stroke properties


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
4. 부모 자식 선택자
어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다.

1) 조상 자손 선택자
아래의 태그는 ul 밑에 있는 모든 li 태그를 선택합니다.
 
ul li
    color:red;

2) 부모 자식 선택자
아래 선택자는 #lecture 바로 밑에 있는 li만을 선택합니다.

#lecture>li
    border:1px solid red;

3) 친구 선택자
(이런 용어는 없습니다)  아래 코드는 ul과 ol을 동시에 선택합니다.

ul,ol
    background-color: powderblue;

예제 - parent_selector_selector_1.html
<!DOCTYPE html>
<html>
<head>
<style>
      ul li
        color:red;
     
      #lecture>li
        border:1px solid red;
     
      ul,ol
        background-color: powderblue;
     
</style>
</head>
<body>
<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
</ul>
<ol id="lecture">
   <li>HTML</li>
   <li>CSS
     <ol>
       <li>selector</li>
       <li>declaration</li>
     </ol>
   </li>
   <li>JavaScript</li>
</ol>
</body>
</html>

실행 화면



블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS
3. 선택자의 종류

선택자의 타입들

이번 수업에서는 다양한 형태의 선택자를 알아봅니다.

  • 태그 선택자
  • 클래스 선택자
  • 아이디 선택자

3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 배우면 됩니다

1) 태그 선택자

태그를 선택합니다. 아래 코드는 문서의 모든 li 태그라는 뜻입니다

li{color:red}

2) 아이디 선택자

아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이  select인 태그라는 뜻입니다. 

#select{font-color:50px;}


selector_1.html

<!DOCTYPE html>

<html>

<head>

<style>

      li{

        color:red;

        text-decoration:underline;

      }

      #select{

        font-size:50px;

      }

</style>

</head>

<body>

<ul>

<li>HTML</li>

<li id="select">CSS</li>

<li>JavaScript</li>

</ul>

</body>

</html>


실행 화면

다음과 같이 id select 값만 font-size 적용됨을 있다.


3) 클래스 선택자

 클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다


클래스 속성을 선택하려면 .클래스명 으로 합니다.


<!DOCTYPE html>

<html>

<head>

<style>

      li{

        color:red;

        text-decoration:underline;

      }

      #select{

        font-size:50px;

      }

      .deactive{

        text-decoration: line-through;

      }

</style>

</head>

<body>

<ul>

<li class="deactive">HTML</li>

<li id="select">CSS</li>

<li class="deactive">JavaScript</li>

</ul>

</body>

</html>


실행 화면

클래스가 deactive 요소들은 취소선이 지정되었음을 있다.

 


블로그 이미지

가카리

소프트웨어와 하드웨어 프로그래밍, 취업 및 직장생활 전문 블로그

Tag CSS