[생활코딩 by 이고잉] CSS기본부터 활용까지(작성중)

2019. 2. 10. 16:40

728x90

HTML CSS가 만나는 법.

HTML 문법 style 속성

<style>

h2{color:blue}

<style>

선택자

선택자와 선언

li{

color:red;

text-decoration:underline

}

li : selector :선택자

{} : declaration : 선언

; : Decoration seperatior : 구분자.

ID 선택자

#select{

font-size:100px

}

부모 자식 선택자

<ul>

<li>selector</li>

<li>declaration</li>

</ul>

<li>JavaScript</li>

</ul>

ul li{

color:red

}

바로 밑에 자식만 "> "

#lecture> li{

background-color:powderblue;

}

동시 선택 , "ol,ul"

선택자 팁

http://flukeout.github.io/

체트 씨트 : 컨닝페이퍼 같은거.

가상 클래스 선택자 : pseudo class selector

:link – 방문한 적이 없는 링크
:visited – 방문한 적이 있는 링크
:hover – 마우스를 롤오버 했을 때
:active – 마우스를 클릭했을 때

a:active{

color:green

}

a:hover{

color: yellow

}

-> 클릭해도 hover가 뒤에 있어서 클릭이 적요이안됨

visited 는 보안때문에 일부만사용가능

:fucus{

}

가장뒤에 쓰는게 좋음

적용순서

상속 : inheritance

<li>JavaScript</li>

</ul>

html{color:red;}

#lecture{color:black}

부모의 색상을 자식이 물려받는게 효율적: 적은 코드로 많은 사용.

상속되고 상속되지 않는 속성들이 있다.

주석

캐스케이딩 cascading : CSS 웹브라우저 < 사용자 < 저자 볼수있는 디자인 권리를 준다. >>> 우선순위 참고

CSS : Cascading Style Sheet 캐스케이팅(연속적인) 스타일 시트

1990년 HTML,

하나의 테그에 여러 CSS 중첩되었을때.

<li>JavaScript</li>

</ul>

<style>

li{color:red: !important;}

#idsel{color:blue}

.classel{color:green;}

</style>

ID 선택자 > Class선택자 > 태그선택자 : Cascading 규칙

구체적인것 > 포괄절 :: 적용 우선순위

!important;

무조건 최우선 적용

서체 다루기

크기: font-size

unit 단위 : px vs em vs rem

px 절대적

em, rem 브라우저 설정에 따라 상대적

결론적으로 rem 을 쓰도록. 폰트 크기를 조정할 수 있는 사용자의 권리

16px >> 검사로 보면 계속 16px

16rem; >> 검사로 보면 브라우저가 중간이 면 16px 크게 보면 24px로 나옴

브라우저 폰트 사이즈 미디엄.... very Large. : px 를 쓰면 글자가 바뀌지 않음, rem을 쓰면 폰트크기가 바뀜

color

color name, hex(16진수), rgb(빨강, 초록, 파랑 조합)

text-align

center, left, justify

justify : 양쪾이 균등하게 분배

      p{
        text-align: justify;
        border:1px solid gray;
      }

의미 없는 텟스트 lorem ipsum 로렘이썸

font-family, font-weight, line-height

     #type1{
        font-size:5rem;
        font-family: arial, verdana,"Helvetica Neue", serif;
  line-height:2;  /*두배 px 사용가나 부자연*/ 
  font:bold 5rem/2
      }
#type2{
font:bold 5rem/2 arial, verdana,"Helvetica Neue", serif;
}

font-family > 우선 순위에 따른 font 지정

장식 없는것 : sans-serif

장식 있는것 serif

고정폭 : monospace

합쳐서 써도됨.

웹폰트

사용자가 폰트가 없으면 웹폰트 다운받아서 쓰게함... 영어는 가벼우나 한국어 용량이 큰편

Standard

Specify inCSS

#font1{

font-family: 'Open Sans Con~~';

}

font face generator 검색

ttf, otf, eot... 파일로 다운가능

web-font.html 이름 지정해서 해당 폰트 만들어 사용 가능

@font-face {

font-family:'abc':

}

body{

font-family:'abc'

}

레이아웃 기본

인라인 vs 블럭 레벨 inline vs block level

<h1>Hello wold</h1>

안녕하세요 <a href=""> 생활코딩</a> 입니다.

<style>

h1, a {boder:1px solid red;}

h1{display: inline;}

a{display:block;}

</style>

인라인 엘리먼트 : a

블럭레벨 엘리먼트 (줄 전체-줄바꿈- 공간을씀) :h 태그

박스 모델 - 주사용 css 중 70%정도

높이감, 여백, 크기 조절

<p>

p테그

</p>

<p>

파라그래프

</p>

안녕하세요<a href="">생활코딩입니다. </a>입니다.

p, a{

/*border-width:10px;

border-style:solid;

border-color:red; : 테두리

boder:10px solid red;

padding:20px; /* 해당 크기 만큼 화면이 벌어짐 : 접시 음식*/

margin:40px;/* 테두리와 다른 요소간 간격 : 접시 접시*/

width:50px;

hight:50px;

}

** 인라인 엘리먼트에 적용하면 width, hight 값이 무시된다.

box-sizing

padding, margin 이 예상과 다를때. 예측하기 쉽게 하기.

width 둘다 같을 때 다르게 보임 --> boder, margin 값이 빠진 영역 의 길이가 같음

>> box-sizing 등장.

box-sizing:border-box ; 경계의 크기가 동일해짐.

*{ } 모든 선택자

    <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>

마진 겹침

1. <h1><h1> 연속해서 있을 때 아래, 위의 마진이 겹침

2. 부모, 자식 태그에서 부모가 border가 없을 때 마진값은 큰쪽 의 마진값을 기준으로 차이가남... 마진이 겹침

3. <div><div> 연속해서 있을 때 마진 겹침...첫번째 div border 값이 없으면 위쪽 혹은 아래 마진값중 큰값이 거리값이 된다.

<!DOCTYPE html>
<html>
  <head>
      <style>
          h1{
              border:1px solid red;
              margin:100px;
          }
      </style>
  </head>
  <body>
  <h1>Hello world</h1>
  <h1>Hello world</h1> <h1>Hello world</h1>

  </body>
</html>

<!doctype html>
<html>
<head>
    <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>

<!doctype html>
<html>
<head>
    <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>

position - absolute, fixed

left:0;

top0; :: absolute 지정하면 ... 더이상 부모의 소속이 아님. 부모로 설정되는것이 다 설정이 않됨

position이 있는 상위 부모가 나타나면 기준으로 해서 위치값을 정함.

position: fixed; 위치가 바껴도 고정됨

레이아웃 활용 flex

flex : 레이아웃을 잡을 때 사용하는 기능

Layout의 흑역사. ...

table :표여야 하는데...의미 없는 레이아웃에서도 사용하기도...

position... reletive... absolute

float ... 이미지를 옆에 이미지 글씨 흘러가도록..

</container>

container

item

display

flex-direction

flex-wrap

felx-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

flux

1. 부모에 display:flex;

2. 부모에

flex-direction:row-reverse; : 오른쪽 정렬 , default : row

flex-direction:column-reverse; 수직역순 정렬, - 높이 공백 포함 거꾸로 정렬

flex-direction::column : 수직 순서 정렬

3. item에

flex-grow:1; *** 칸이 n이 1씩 나눠가져서 여백이 없어짐.

.item:nth-child(2){ /*2번째 칸*/

flex-grow:3; /*item에 flex-grow가 0이면 혼자 나머지 공간꽉채움*/

flex-bassis:300px; 여백이 존재.. 화면작아짐.

}

.item:nth-child(3){ /*2번째 칸*/

flex-grow:3; /*item에 flex-grow가 0이면 혼자 나머지 공간꽉채움*/

flex-bassis:300px; /*여백이 존재.. 화면작아짐.*/

flex-shrink:2; /*basis 값을 가지고 있을 때 줄어들 떄 비율 , 0은 작아지지 않음*/

}

<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .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>

<!doctype>

<html>
<head>
    <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: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </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>

Holy Grail Layout 성배 레이아웃

Header

Nav Main AD

Footer

<!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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nesciunt vel facere ex accusantium ipsum provident iste itaque? Perferendis culpa nostrum repellendus dolores repudiandae assumenda, tempora laudantium in quibusdam placeat facilis ex voluptatem provident velit iusto fuga eum nobis deserunt enim minus. Explicabo vel labore, eum doloremque, impedit recusandae aut illum corporis quis atque sit vero quasi tempore placeat ipsam similique quo delectus provident animi distinctio debitis eligendi voluptatum! Dolorem perspiciatis similique non fugit eaque? Commodi suscipit earum aliquam rem, neque ad. Obcaecati nisi beatae officia inventore laborum nostrum natus perspiciatis iste, aperiam vero quisquam saepe labore facilis veritatis illo excepturi vitae autem quis! Voluptatibus atque doloribus perferendis, eligendi ex aliquid debitis laudantium omnis accusamus similique cum mollitia quos adipisci reprehenderit assumenda sequi, dolore tenetur ipsam, odio, vero reiciendis iure. Dolore itaque nesciunt ipsam, id maxime saepe officiis dolorum molestias earum temporibus? Possimus ipsum accusamus quasi minima, quod magnam iusto non cupiditate facilis pariatur aliquam omnis, blanditiis assumenda magni ad voluptas dicta est optio reprehenderit rem ratione earum ipsa, dolor vero! Totam, adipisci eos nihil repellendus. Maiores, blanditiis. Officiis aspernatur iure culpa illo sint ex id perferendis, explicabo architecto ipsa voluptatibus nesciunt pariatur commodi cum quam. Obcaecati ut quidem quam error nemo. Pariatur aliquid autem inventore laboriosam, velit totam, temporibus ad magnam minus, quis nesciunt aperiam veritatis. Vitae porro provident magni eos sit sed dignissimos iure natus odio nostrum molestiae atque mollitia saepe adipisci ut velit quo hic fuga ex, voluptates vel eum ipsum amet, sunt corporis. Maxime odit alias, ratione tenetur, asperiores consequuntur deserunt modi velit ab maiores pariatur voluptates beatae aut nesciunt perspiciatis sed veritatis doloremque quibusdam amet vero. Qui, labore. Atque ratione quae ducimus reprehenderit perferendis nisi earum, debitis commodi maxime sequi facere optio doloribus, repudiandae ex quidem amet iusto inventore quaerat at praesentium sint. Omnis mollitia esse illum suscipit, quis dolorem maxime sunt eaque, autem nisi corrupti perferendis provident tempore quas, unde! Doloribus, at, accusamus, maiores enim amet quod provident temporibus atque, ipsam fugiat incidunt. Quasi iusto ea quibusdam eveniet porro officiis dicta fugiat fugit laudantium ipsum esse quisquam quo laboriosam odit voluptates alias veritatis expedita quidem consectetur eos, impedit, incidunt dolorum? Laborum, facere nulla ullam, aliquid rerum nihil non adipisci, architecto obcaecati iure quam, fuga minus alias eligendi provident ex odio sit. Ducimus, facilis veritatis numquam, maxime quos natus animi, a magnam itaque veniam pariatur sed alias eos quas? Voluptatum fugit doloribus fugiat iste adipisci quidem odit consectetur, sapiente culpa magnam laborum, laboriosam exercitationem cupiditate dignissimos, nisi doloremque hic itaque aspernatur. Ab labore dolorum cumque rem vitae repellat quo quae porro cupiditate minus. Perspiciatis cumque sequi provident fugit. Nulla reiciendis voluptates molestiae corporis voluptate, quidem consequuntur, dolor vero necessitatibus deleniti tempora ab facilis similique, ea error deserunt fuga quia atque omnis nam earum non, illo. Minima quos optio nostrum eos aperiam? Quam, obcaecati velit deserunt tempore, iure vitae repudiandae quos illum quasi esse quas quaerat at consectetur necessitatibus. Cum, quod, dolore voluptatibus quibusdam accusamus aliquam consequatur dolorum illo! Sequi commodi adipisci explicabo soluta necessitatibus magni expedita cumque, officiis voluptas, vel amet recusandae sunt, quidem eum aliquid deleniti unde, impedit non magnam consectetur est minima facere architecto. Molestias cum vero nostrum saepe, dignissimos eius beatae natus fugiat deserunt esse, nesciunt eos ducimus id amet magnam possimus? Optio adipisci quisquam earum totam nemo sunt provident iure ab consectetur et deleniti molestiae blanditiis laudantium, autem consequatur rerum labore ipsa ipsam deserunt nisi, expedita doloremque quibusdam! Illo nemo laborum a sequi in, ad ipsum blanditiis alias! Eaque eos eligendi hic dolorum sint, tempore voluptatum ut numquam. Corporis similique itaque accusantium, esse porro ea dolor, quae consequuntur ullam necessitatibus magni rem optio officiis totam in dicta quas, odio quam blanditiis dolores pariatur? Dolorem, fuga? Harum ratione nemo perspiciatis culpa eum repudiandae esse, atque impedit nihil debitis, assumenda est. Sapiente rerum alias ipsa tempore obcaecati deserunt maiores distinctio officiis itaque fugit optio, eveniet facere amet ipsum, harum laboriosam eius, enim magni blanditiis temporibus nobis consequuntur ut. Quia magnam vero atque modi aspernatur in perferendis voluptas reprehenderit, rerum dolore unde iusto ab non eius molestiae quasi tenetur beatae ipsam quidem, quos at architecto voluptate alias eos. Deserunt velit beatae, ullam, accusantium sit asperiores! A vero perferendis, harum praesentium dolorem deserunt. Numquam voluptas necessitatibus, aliquam ullam saepe harum amet consequatur minima neque officia maxime quo beatae ab aliquid ex placeat rerum unde, reiciendis aspernatur similique, doloremque ad laboriosam modi. Minus quam aperiam, sed aliquid. Fugiat amet harum consequuntur reprehenderit id eum ratione quos temporibus, quae. Ab ut omnis tempora voluptates, sed ea animi voluptatem pariatur quod mollitia corrupti voluptas repellendus consequatur quae adipisci, enim vitae harum nulla natus iusto hic totam officia architecto quam. Debitis dignissimos praesentium, hic. Ad assumenda, aliquid consequuntur dolore eum repudiandae ab explicabo ipsa sed blanditiis. Quidem unde necessitatibus facilis, quis commodi. Dignissimos perferendis, nihil labore corrupti autem cumque ipsum vel voluptatum? Nostrum labore, omnis provident ullam repellendus culpa amet rem consequatur animi, necessitatibus porro. In consequatur optio recusandae, quisquam accusantium at deserunt voluptatem fugit quibusdam neque libero assumenda consectetur numquam ratione quaerat. Quos omnis neque atque, id perferendis possimus, alias, dignissimos doloribus ducimus similique ratione vitae eos laudantium, tempore cupiditate quod consectetur! Voluptas enim laboriosam nesciunt rem. Recusandae beatae numquam asperiores adipisci neque, vel pariatur suscipit provident, a est magni. Laborum dolore incidunt saepe ipsam? Eveniet doloremque animi maxime aliquid rem fugit dolor dignissimos! Quo, ut quod ab.
</main>
<aside>
AD
</aside>
</section>
<footer>
<a href="https://opentutorials.org/course/1">홈페이지</a>
</footer>
</div>
</body>

</html>

저작자표시 변경금지

'For Real > Others' 카테고리의 다른 글

Docker Desktop requires Windows 10 Pro or Enterprise version 14393 to run. (0)	2019.02.24
IntelliJ IDEA 단축키() (0)	2019.02.11
CES 국제 전자제품 전시회 (0)	2019.01.12
APSTNDP(All People Seem To Need Data Processing)- OSI 7계층 (0)	2018.07.19
호스팅 케이알 네임서버 설정(깃허브 페이지) (0)	2018.07.08

blog.1028web.com 이동중

[생활코딩 by 이고잉] CSS기본부터 활용까지(작성중)

HTML CSS가 만나는 법.

선택자

선택자와 선언

ID 선택자

부모 자식 선택자

바로 밑에 자식만 "> "

동시 선택 , "ol,ul"

선택자 팁

가상 클래스 선택자 : pseudo class selector

적용순서

상속 : inheritance

주석

캐스케이딩 cascading : CSS 웹브라우저 < 사용자 < 저자 볼수있는 디자인 권리를 준다. >>> 우선순위 참고

서체 다루기

크기: font-size

color

text-align

font-family, font-weight, line-height

웹폰트

레이아웃 기본

인라인 vs 블럭 레벨 inline vs block level

박스 모델 - 주사용 css 중 70%정도

box-sizing

마진 겹침

position - absolute, fixed

레이아웃 활용 flex

flex : 레이아웃을 잡을 때 사용하는 기능

flux

}

Holy Grail Layout 성배 레이아웃

'For Real > Others' 카테고리의 다른 글

+ Recent posts

티스토리툴바