Crafting My Future with Code

margin

요소의 외부 여백을 지정하는 속성

margin : 1px 2px 3px 0;
/* top right bottom left 위에서부터 시계방향으로 4가지입력, 
입력값이 없을시 별도로 단위를 입력하지 않는다.*/

/*모두 같을때*/
margin : 5px;
/* 위 5px , 좌우 10px, 아래 0*/
margin : 5px 10px 0; 
/*위 아래 5px 좌우 10px*/
margin 5px 10px;

• top, bottom , right, left가 있으며
• (형제 태그의 경우) 형제 태그의 top, bottom margin은 겹친다(더 큰쪽에게 먹힌다)
• ※ 단 ! right , left 의 margin은 겹치지 않는다.
• (빈 블록의 경우) 빈 블록(높이가 없는경우) 에는 margin이 있음에도 불구하고 서로를 지나가서 영역을 침범한다.
• (부모안에 자식이 있는경우 )첫번째 자식이 margin-top 이 있거나 ,
  마지막 자식이 margin-bottom 이 있는경우 부모의 영역을 뚫고 margin이 나온다.
• 위의 해결방안은 부모를 blcok format context 로 만들어준다. (float나 overflow , position : absolute를 사용하는 방법이 있다.)
• ※ display: inline-block 과 width: 100%을 사용하면 위의 3가지 경우를 대부분 해결이 가능하다.
• margin: 0 auto; 부모에 맞춰 정렬

자식에게는 가능한 margin을 주지 않는것도 고려를 해봐야겠다..

padding

margin과 비슷하며 , 요소의 내부 여백을 지정하는 속성

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

1. 첫번째 div는 아무 옵션이 없는 div 태그입니다.

2. 테스트 1은 1번과 동일한 div 태그에 margin을 10 준 상태입니다.
     margin : 10px 라는 옵션이기 때문에 4방향 전부 margin이 들어갑니다.

3. 3번은 padding : 10px를 준 상태이며, 요소 내부에 여백이 들어간걸 볼 수 있습니다.

box-sizing

요소의 크기 계산 기준을 지정합니다.

1. content-box (기본값) : 요소의 내용(content)으로 크기 계산

2. border-box  : 요소의 내용(content) + padding + border로 크기 계산

See the Pen box-sizing by J-Plum (@J-Plum) on CodePen.

1. 첫번째 div의 경우
기본 요소 100*100px , padding 20 +20 (좌 우) border 2 +2 해서 144*144px 라는 크기가 나왔습니다.

하지만 2번째 div처럼 가로 세로를 100px로 하고싶습니다.

2. 3번째 div처럼  padding과 border을 빼준값인 56px로 가로 세로를 지정해서 바꿔줘야할까요..?

4. box-sizing을 border-box로 사용하면됩니다. 
   4번째 div를 보면, 가로 세로를 별도로 지정하지 않아도 3번 div와 같은걸 볼 수 있습니다.

즉 border-box는 요소의 크기 계산 자체를 content + padding + border 이 width * height가 되도록 해줍니다

그래서 content + 40 + 4 =100 이니  content가 자동으로 56이 되었습니다.

단위의 종류

1. px(픽셀) : 화면에 출력되는 하나의 점
2. %(상대적 백분율)
3. em : 요소의 글꼴 크기
4. rem : 루트 요소(html)의 글꼴 크기
5. vw / wh : viewport 가로/세로 너비의 백분율 ex) 1vw : 보이는 화면의 100분의 1
   (viewport : 브라우저에 보이는 화면)

See the Pen 단위 by J-Plum (@J-Plum) on CodePen.

1. 첫번째 parent와 child들은 parent가 160px이며, child1은 width가 50%

즉 부모의 크기의 50%인 80px이 할당되어 있습니다.

2. child2는 width가 10em인데 기본적으로 font-size를 지정하지않으면 16px입니다. 그러므로 10em은 160px이 됩니다

3. parent2 와 child3의 경우는 font-size를 변경후 width : 10em을 한 결과입니다.

4. child4의 경우 rem을 사용했습니다. rem은 루트요소의 글꼴 크기입니다.
    따로 설정하지 않았기에 기본 크기인 16px입니다.

5. child5의 경우 vw를 사용했습니다 viewport width 의 50%
    즉, 브라우저에 보이는 화면의 50%를 의미합니다.

너비는 auto와 단위로 있습니다.

1. auto : 브라우저가 너비를 계산합니다.

2. 단위 : px, em, vw,vh(viewport width/height) 등 단위로 지정합니다.

auto 예시

<span>Hello</span> 
<span>World</span>

width : 포함한 컨텐츠 크기만큼 자동으로 줄어듭니다.

height : 포함한 컨텐츠 크기만큼 자동으로 줄어듭니다.

2. <div>Hello</div> 
   <div>World</div>

width : 부모 요소의 크기만큼 자동으로 늘어납니다.

height : 포함한 컨텐츠 크기만큼 자동으로 줄어듭니다.

max-width/height

1. none : 최대 너비 제한이 없음
2. auto : 브라우저가 너비를 계산(잘 사용하지 않음)
3. 단위 : px, em, vw, wh 단위로 지정

min-width/height

1. none : 최소 너비 제한이 없음
2. auto : 브라우저가 너비를 계산(잘 사용하지 않음)
3. 단위 : px, em, vw, wh 단위로 지정

See the Pen 너비 by J-Plum (@J-Plum) on CodePen.

첫번째 parent와 child는 width를 별도로 지정하지 않았습니다 (width : auto)
그래서 부모 요소(body태그) 만큼 늘어난 것입니다.

두 번째 parent2 와 child1,2의 경우에는  부모인 width를 100px를 주었습니다.
child1의 경우 width를 별도로 지정하지 않아서 부모의 width를 따라갔습니다.
child2의 경우 min-width로 최소 넓이를 200px, 부모보다 큰 값을 주었습니다.
부모 요소를 벗어나는 걸 볼 수 있습니다.

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 것을 의미합니다.

  1. 점수가 높은 선언이 우선순위가 높습니다.

  2. 점수가 같으면, 마지막에 작성된 값이 적용됩니다.

점수

!important (무조건) > 인라인 선언(1000점) > id 선택자 (100점)
> class 선택자, :속성선택자 (10점)>  태그선택자 , :: 가상 요소 선택자 (1점) > *(전체 선택자)

.list li.item ( list클래스(10점), li태그 선택자 (1점) item클레스(10점) = 21점 )

.list li:hover ( list 클래스 (10점) li 태그 (1점) :hover 속성선택자 (10점) = 21점)

.fruit::after ( fruit 클래스(10점) :: after 가상요소선택자 (1점) = 11점)

#hello div ( hello 아이디 (100점) , div태그 (1점) = 101점)

header .nav li:nth-child(2n) ( header 태그 (1점)  . nav클래스(10점) , li태그 (1점) ,  속성선택자(10점) = 22점)

h1 ( h1태그 1점)

:not(.nav) (.nav 클래스 10점     :not은 부정선택자로써 not은점수 계산하지 않고 .nav만 계산해서 10점입니다)

See the Pen 생성자 우선순위2 by J-Plum (@J-Plum) on CodePen.

.box div.test  (.box 10점, div 1점, test 10점  = 21점)
.box *:not(.hello) (.box 10점, .hello 10점 = 20점  / not이 점수가 들어간다면 30점이겠지만  not은 점수가 없습니다.)

속성 선택자 : 속성을 포함한 요소를 선택

 사용시 [ ]  사이에 속성을 기입하여 사용합니다.

See the Pen 선택자 속성 by J-Plum (@J-Plum) on CodePen.

첫 번째는 그냥 input 태그입니다

두 번째는 type이 password인 input입니다. 오렌지 색상으로 변경된 걸 볼 수 있습니다.

세 번째는 disabled 속성이 들어간 input입니다 비활성화된걸 볼 수 있으며, 색상이 빨간색으로 바뀐 걸 볼 수 있습니다.

마지막은 data 속성을 가진 span입니다 [data-fruit]라고 입력해서 과일만 색상이 바뀐 걸 볼 수 있습니다.

See the Pen 선택자 속성2 by J-Plum (@J-Plum) on CodePen.

조금더 깊게 들어가 보겠습니다.

1. [속성~=값] 속성과 값이 일치하는 요소를 찾을때 단 하나만 일치해도 적용

• 1~3번째의 input의 value값은 no가 들어가있습니다.
  (여기서부터는 제 추측입니다..)
  띄어쓰기로 구분이 되는 듯 하며, 문자가 붙어있을경우 인식하지 않습니다. 대소문자도 구분합니다.

2. [속성^=값] 지정한 문자로 시작하는 속성 값에만 적용

3. [속성$=값] 지정한 문자로 끝나는 속성 값에만 적용

4. [속성|=값] 속성이 지정한 값으로 시작하면 적용

• 2번과 햇갈릴 수 있지만, 4번의 경우 정확히 일치하는 값일 경우에만 적용됩니다.
• ex) [value^="1"]  1로 시작하는 속성값 , [value|="1"] 속성값이 1인 경우에 해당됩니다.
• [value|"값"] 다음에 - 으로 이어질 경우도 포함됩니다.

5. [속성*=값] 해당 값이 포함 되어 있으면 적용

스타일 상속

부모에 적용된 css속성이 자식에게도 적용되는 경우

See the Pen 스타일 상속 by J-Plum (@J-Plum) on CodePen.

주로 글자 관련 속성들이 상속이 됩니다.

font-style : 글자 기울기

font-size : 글자 크기

font-weight : 글자 두께

line-height : 폰트의 높이

font-family : 폰트

text-align : 정렬

등등 더 많습니다..

강제 상속

See the Pen 강제상속 by J-Plum (@J-Plum) on CodePen.

inherit 이라는 값을 통해 상속이 되지 않는 다양한 속성들을 강제적으로 상속 시킬 수 있습니다.

height 상속된걸 볼 수 있습니다. 오랜지색에 마우스를 올리면 확인 가능합니다.

가상 요소 선택자는 :: 두개를 사용합니다.

See the Pen 가상요소선택자 by J-Plum (@J-Plum) on CodePen.

::before  : 선택자 앞에 내용을 삽입합니다.

::after   : 선택자 뒤에 내용을 삽입합니다.

(before 와 after은 inline요소이다)

(이렇게 앞 뒤에 ::before, ::after 가상요소가 생성되어 붙어있다.!)

:hover 마우스를 올려놨을때

:active 클릭을 유지하고 있는 상태일때

:focus 클릭 된 상태일때 (input , select, textarea 등 에 사용이 가능하다)

  클릭이 되지 않는 태그의 경우 tabindex="-1" 을 옵션으로 주면 focus가 가능해진다.

See the Pen active by J-Plum (@J-Plum) on CodePen.

첫번째 div는 hover가 적용되어 있습니다. 마우스를 올리면 크기와 색상이 변합니다.

두번째는 클릭을 유지하고있을때 크기와 색상이 변합니다.

세번째 input은 focus의 예시입니다 클릭이 되어 사용 가능한 상태일때 적용됩니다.

마지막 div는 일반적으로는 focus가 적용되지 않지만 tabindex="-1"을 옵션으로 focus가 가능하게 된 상태입니다.

See the Pen 가상 클레스2 by J-Plum (@J-Plum) on CodePen.

:first-child : 첫번째 자식

  - 첫번째 자식의 색상이 red로 바뀌었습니다.

:last-child : 마지막 자식

  - 마지막 자식의 색상이 보라색으로 바뀌어야 하지만 아래에 적힌 css에 의해 덮어 다른 색상이 나옵니다.

:nth-child(숫자) :  위에서 사용한 *는 전체를 의미합니다. (fruits 자식 전체)

  - 자식 전체중 2번쨰의 색상을 초록색으로 바꿉니다.

:nth-child(n)  : n의 경우 0부터 1씩 늘어납니다  2n이므로 . 0, 2, 4, 6 ... 이런식으로 늘어납니다
(Zero-Based-Numbering)

  - 2n 이므로 짝수의 색상이 초록색으로 바뀌었습니다.

  - 2n+1 의 경우 홀수에 해당됩니다. (0 + 1 , 2+1, 4+1 ...)

부정선택자

:not(선택자) 선택자가 아닌 요소를 선택 위에서는 span이 아닌 나머지에 밑줄이 추가되었습니다.

인라인 요소 (글자 요소)

1. 요소가 수평으로 샇임

<span>Hello</span>
<span>World</span>

줄바꿈이 띄어쓰기로 들어가있다.

<span>Hello</span><span>World</span>

인라인 요소는 하나의 글자처럼 취급하기 때문에 줄바꿈을 띄어쓰기로 인식한다

2. 인라인 요소는 자신이 포함한 콘텐츠 크기만큼 자동으로 줄어든다!

3. 인라인 요소는 width, height를 가질 수 없다.

4. margin, padding 등 여백의 경우 상하는 불가능, 좌우는 가능하다.

5. 인라인 요소 안에는 블록 요소를 사용할 수 없다.

블록 요소 (상자 요소)

<div>Hello</div>
<div>World</div>

1. 요소가 수직으로 쌓인다.

2. 부모 요소의 크기만큼 width가 자동으로 늘어난다.

3. 상하좌우 여백이 적용된다.

4. 블록 요소는 자식으로 인라인, 블록 요소를 사용할 수 있다

    예외 : 블록요소중 <p> 태그는 자식으로 inline 태그만 가질 수 있다.

요소별 종류

인라인 요소

1. 택스트의 경우 div 대신 사용한다

• display: inline 처리가 되어있다
• 기본적으로 contents를 감싸는 사이즈로 지정이 되어있다.
• 원하는 사이즈로 바꾸고 싶다면 display : inline-block을 사용

2. : 이미지를 삽입하는 요소. (Image)

3. : 페이지를 이동하는 하이퍼링크를 지정하는 요소. (Anchor)

• 방문 전/후 색상의 차이가 있다. (css로 수정 가능)
• target 속성으로 _blank를 사용시 새탭이 열린다.

4. <br> : 줄바꿈
5. : <label> 라벨 가능 요소(input)의 제

블록 요소

1. <div>: 구역을 나눈다 (가로줄 전체를 차지한다.) 단점 : 구분이 안됨..

• 기본적으로 css에 display: block; 처리되어있다
• 컨텐츠가 없을경우 css를 입히기 위해서는 width와 height를 주어야한다.

아래의 것들로 대체하기 시작

<header>,<nav>,<main>,<footer>,<article>,<aside>,<figure>

• <header> 가장 눈에 잘 띄고 크고 위에있는 부분
• <nav> 네비게이션 메뉴
• <main> 메인 컨텐츠 부분
• <footer> 회사소개 사이트맵... 등등 부가정보

2. <h1~6> : 제목을 의미하는 요소 (Heading)

• 숫자가 작을수록 더 중요한 제목을 정의.

3. <p> 문장을 의미하는 요소. (Paragraph)

• div를 사용해도 상관없다

4. <ul> :  순서가 필요없는 목록의 집합을 의미한다 (Unordered List) 순서가 필요한 경우 <ol> 을 사용

• <li> 는 목록 내 각 항목을 의미한다 (List Item)
• 태그는 반드시
  의 자식으로 사용해야한다.

예외

1. <input> : 사용자가 데이터를 입력하는 요소, 인라인 요소 이면서, 블록 요소이다 (Inline-block)

• tpye 옵션으로 입력받을 데이터의 타입을 지정한다.
• placeholder 속성으로 사용자가 입력할 값에 대한 힌트를 제공할 수 있다.
• 수평으로 쌓인다.
• 블록 요소처럼 width, height 지정이 가능하다.

자주 쓰이는 블록 태그와 인라인 태그

대표적인 블록태그

<div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <section>, <table>, <ol>, <ul>, <p>

그외의 block 태그

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>,  <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <hgroup>, <hr>, <noscript>, <pre>,<output>,, <video>

대표적인 인라인 태그

<a>, <button>, <img>, <input>, <label>, <script>, <select>, <span>, <textarea>

그 외의 inline 태그

<abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <cite>, <code>, <dfn>, <em>, <i>, <kbd>, <map>, <object>, <q>, <samp>, <small>, <strong>, <sub>, <sup>, <tt>, <var>