02 HTML/CSS

####TABLE

#####01. Notetaking #####02. Storehouse #####03. Site #####04. Bookmark #####05. Question

##01 Notetaking

같은 코드를 세 번 이상 반복하지 말라

html로 구조를 만들고 나서 css로 넣는다는 생각으로.

속성과 속성을 구분하는 구분자는 띄어쓰기

HTML의 여러 태그 중에 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않는다는 규칙이 있습니다. img, input, br, hr, meta 등이 닫지 않는 태그의 사례입니다.

부모도 자식도 블록 -> 자식에 margin: 0 auto 부모는 블록,
자식은 인라인 블록 -> 부모에 text-align: center

Q. 인라인블록인데 text-align이 어떻게 됨?

• 인라인 -> 가로값만 가지고 가로 마진/패딩만 된다
• 블록 -> 가로세로값은 지정해주지않으면 가로100%이고 지정해주면 지정해준값만큼 되지만, 자리차지는 한 줄을 다 해서 옆에 다른게 못온다.
  -> float를 하면 아니다
• 인라인블록 -> 가로세로값 다 가지고 가로세로마진패딩 다된다, 자리차지는 자기 가로세로만큼만 한다

이미지는 inline element block에서 inline-block준에랑 inline에서 inline-block준애랑 똑같음.
inline에 inline-block하면 세로값을 조정할 수 있게됨.
block에 inline-block하면 가로 폭을 잃게됨.

사진은 inline-element.

피카츄예제에서 텍스트는 블록이기때문에 원래 위까지 못오는데 사진에 float: left; 를 해서 글이 위로 온 것. 만약에 글에 float : left한다음 %줬다면 피카츄 사진 폭 만큼 텍스트 범위가 없었을 것 (p.91, 92)

Clearfix는 사라진 자식찾기 vs GhostElement는 잃어버린 형제찾기

암기비법

float는 margin, padding만 먹음.

position 주면 float하는 의미가 없음.

input, textarea, button 상속이 안되서 font는 적용이 안됨

font: inherit; 이라고 써야됨.

Javascript == inline

우선순위 같음.

inline-block 요소가 붙어있으면 사이에 공백이 생김.

-> float로 해결 or font-size: 0;

ex) ABC ABC vs ABCABC -> 줄바꿈도 컴퓨터는 공백으로 인식하기 때문에.

& > * { height: 60px; text-decoration: none; }

-> 링크안보이도록해서 __ 그어지는 문제해결

float로 자식 잃어버리는 문제 해결방안 4가지

(1) 부모에 overflow: hidden or auto; (스크롤 생기는 변수때문에 잘 안씀)

(2) display: inline-block;

(3) (다음자식에) clear left or right;

(4) clearfix

float 속성을 주면 width 값을 잃어버리기 때문에 width: 100%;처럼 가로 값을 다시 설정해야함.

inherit은 무시하기 위해 넣은 것. -> 기본값을 가짐.

height의 경우 %는 부모 기준으로 주어지는 것이기 때문에 부모에 %가 주어지지 않으면 안됨. (물론 값으로 주면 당연히 됨) 반면 width는 (부모가 div 블록요소일 경우) 가로 값을 100% 차지하고 있기때문에 부모에서 %가 없어도 사용가능.

블록요소는 무조건 부모 가로 크기의 100%를 차지하고 있음.

레이아웃 그릴 때 사진을 갖는 부모를 고정시키려면 부모의 height 보다는 width를 고정. because 세로가 긴 사진이 오면 사진이 넘어버림.

margin은 아래쪽으로 주는 습관 가질 것.

아래쪽으로 줘야 마진 충돌이 안일어남.

다른 픽셀 값 조정없이 요소들간의 배치만으로 문제를 해결하는 것이 가장 깔끔하고 좋은 방법.

float 요소는 원칙적으로 정렬하는 방법이 없음. vertical-align도 안됨.

inline element와 inline-block element가 같은 블록안에 묶여있을 경우 inline-block에 vertical-align으로 수직중앙정렬하면 보통 inline element(보통 텍스트)도 같이 따라서 정렬됨.

inline-element 사이에는 공백이 생기기 때문에 이 공백을 부모에 font-size: 0; 으로 제거하지 않는한 %를 쓰지 않음.

왠만하면 last-child는 하위브라우져에서 안먹히니 first-child를 쓸것. css3에서 last-child생김. nth-child(3) -> border를 top에 넣어서 first-child는 borer-bottom: none;으로 쓰면 됨.

vertical-align은 (chrome에서는) baseline이 기본 *브라우져마다 기본값이 다를 수 있음. baseline은 아래 마지막 내용과 정렬하는 것.

overflow: auto & hidden; 의 경우 height 값을 지정을 해주어야지 감출 수 있음. 지정안해줄 경우 list 길이 만큼 튀어나가버림.

float 된 요소에는 inline-block을 줄 필요가 없음. float로 띄우면 inline-block의 의미가 없음.

height: 100%는 바로 위 부모가 height값 (또는 픽셀값)을 %로 가질 때에만 가져올 수 있음.

width: 100% 는 부모 가로 값을 padding까지 (border까지?) 포함해서 쓰고 싶을 때 사용. 안써주면 그냥 부모의 content 값만 가져옴.

margin 0 auto; 는 블록 안에 블록만 되고 inline-block과는 무조건 안된다. 이유는 없음. margin auto auto 가 가로/세로 가운데정렬 안되는 것처럼.

• 주로 처음 시작할 때 body의 폭을 중앙정렬하기 위해서 씀. .main { max-width: 932px; margin: 0 auto; }

position으로 세로가운데정렬하는건 모두 다 됨. 단 가로세로 길이를 안다는 조건하에..

inline element는 가장 안 컨텐츠에만 쓴다고 생각하고 레이아웃 짤때는 block이나 inline-block 만 쓴다고 생각할 것. 평소 인라인가지고 고민하는것 자체가 이상한것.

가로 가운데정렬 총정리
1) text-align : center; (부모에)
inline or iniline-block 일 때만
(block 아닌 요소를 위한 가운데정렬 block도 inline-block만들면 가능)

2) margin 0 auto; (자식에)
부모도 block, 자식도 block일 때만
(block만을 위한 가운데정렬)

3) 부모가 블록, 자식이 인라인블록, 자식의 `line-height에 부모세로 값을 줘서 margin 0 auto

세로 가운데정렬 총정리
1) vertical align: middle; (각각의 (자식)요소들에) 다른 자식이 있어야만 가능. inline-block or inline 요소 일 때만
(block은 세로값이 없기때문에(x) 가로 값을 100%차지하기때문에 다른 자식과 비교자체가 안됨)
2) ghost element의 가상값 생성

• ghost element의 부모안에 다른 요소를 넣을 수 없기 때문에 그때는 다른 방법으로 해결할것. 사이트에서 말하는 -0.25em은 인라인블록 사이의 텍스트 공백을 없애기 위한 것인데 실제로는 정확히 일치하지 않기 때문에 부모에서 font-size: 0; https://css-tricks.com/centering-in-the-unknown/

세로/가로 가운데정렬 총정리

1. position과 transform, 이동해서 쓰는법
2. line-height 값을 부모의 height값과 동일하게 주면 내부의 요소들은 세로 가운데로 정렬되고, 그 다음 margin 0 auto로 가로 가운데 정렬하면 끝.
   ( 인라인요소에 적용가능하지만, 인라인블록이나 블록 안에 텍스트가 있을 경우 줄 수 있다. line-height 뜻 자체는 줄 간격이다. )
3. Ghost element 만드는 방법

float는 자기 자신에 하는 것.

position: absolute; 하면 float처럼 떠버리는데 이때는 clearfix처럼 하는 방법이 없음. 부모는 바로 위의 position: relative;로만 받음. 이모나 고모의 relative는 무시함

position: absolute; 는 부모의 relative에만 붙음. (가상요소는 부모가 아님) position absolute는 가로세운데 정렬 또는 겹치게 할 때에만 쓰고 너무 많이 남발하지 말것.

position absolute로 겹치게 할때는 z index 값으로 겹치는 순서를 정할 수 있음. 1) 아무 값도 주지 않아도 relative가 일반 요소보다 위에 올라감. 2) 아무 값도 주지 않으면 가장 나중에 한 요소가 가장 위에 올라감 3) z index 값은 1부터 999까지 어떤 값을 주든 상관 없음.

block에 width를 주면 가로 100%를 차지하고 있다가 왼쪽에서 부터 width값 만큼만 가로 값을 가지지만 실제로는 다 자리차지를 하고 있는 것.

하위 브라우저에서 last-child를 지원안하는 경우가 있으니 되도록이면 first-child를 쓰는 습관을 들이자.

background-size : cover; 로 하면 background가 커져도 부모의 크기를 따라감.

.content-base:hover > .content-images { width: 360px; height: 360px; 중심점을 기준으로 크기를 가로1.2. 세로 1.2배로 키움 transform: scale(1.2, 1.2); }

.content-images { width: 300px; hegith: 300px;

*배경 사이즈가 background-size: cover; background-repeat: no-retpeat; }

fixed 된 요소에 z-index: 100000; 값으로 해결 가능.

##02 Storehouse

• alt

이미지가 깨졌을 때 엑박에 어떤이미지인지
설명을 넣어줄 수 있기 때문에 필요함.
또는 시각장애인한테 이게 무슨 이미지 유형인지 읽어줌.

• inline element

strong, a, span
https://www.w3schools.com/html/html_blocks.asp

• block element

h1, p, div

• Clearfix

. a::after {
/* after와 before 상관없음 */
  content: "";
  display: block;
  clear: both;
}
.clearfix { zoom: 1; }  (->  브라우저 땡겼을때 안깨짐)

• nth-of-type

/* 테이블의 모든 tr요소들의 자식 td중 첫 번째에만 적용 */
/* table.wiki-table tr > td:nth-of-type(1) { */
table.wiki-table tr > td:first-

 {
  background-color: #b38b6e;
  color: #fff;
  font-weight: bold;
}

• vertical-align

- inline or inline-block인 형제들끼리만 된다.
https://codepen.io/edge0703/pen/iHJuA
- vertical-align: top;
inline-block을 vertical-align 하면 옆에 있는 inline elemet도 같이 따라감
- vertical-align의 특징은 다른 태그를 기준으로 vertical-align이 된다는 것입니다. 즉 옆의 다른 태그가 있어야 그 태그에 맞춰서 세로 정렬이 됨.

• height vs line-height

height : 실제 세로값
line-height : 가상의 세로값
-> margin : 0 auto;
   로 "가로가운데" 맞추는데 사용가능
부모요소의 height와 자식요소의 line-height의 값이 같을경우,
자식은 부모에 대해서 세로 가운데로 정렬됩니다

• box-sizing: border-box;

content박스에서 padding주면 오른쪽으로 튀어나올 때

• transform: translate(-50%, -50%)

하위 브라우져에서
 인식을 못함 -> Ghost element 방법

• before & after 가상연산자

.middle-parent:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -0.25em; /* 중앙이 안될수 있어서 가져야함*/
}

• max-width vs width

사진 채울 때 부모의 크기를 넘지 않는 선에서 채울 때.
*이미지에 max-height 값주면 찌그러질 수 있으니 조심.

• calc에 Sass변수를 쓸 때는 #{변수명}을 사용

   cal(#{$card-margin});
   width: calc(100% / 3 * 2 - #{$card-margin});
   float: left;
   height: $col-height;

• transform: translate

 하위 브라우저에서 안보일 가능성 높음

• div[class^=col]

• inherit

• list

1. list-style: none;
2. margin, padding: 0;
보통 점 안보이게 하고, 마진 패딩 없앤 뒤에 사용

• 원만들기

width = height
border-radius = 50%

• before & after 사용예

* {box-sizing: border-box}
* :after,
* :before
// before,after에는
   적용 안되므로 필요하면 별도로 넣어야함
.title:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fc0000;
    content: '';
    display: inline-block;
    border: 2px solid blue;
    box-sizing: border-box;
    margin: 0px 5px 0 0;

• @media screen and (max-width: 600px) { width: 100%; }

media query는 어떤 표시기기에서 최소 또는 최대 길이같은 특정 조건을 정하고 그 조건에 해당하면 css를 교체해주는 것.
@media screen and (max-width: 600px) {
	width: 100%; !important;
	dislplay: inline !important;
}

 그리드 시스템과 media query같은 것을 갖고 만듦.

• 텍스트 최대 라인 설정하기

.text-line-max {
max-height: 100px;
overflow: hidden;
}

• overflow-y & overflow-x

overflow를 쓸때 넘치는 부분 (x축 또는 y축)을
쓰지 않으면 스크롤이 가로세로 다 되기 때문에
보통 지정해준다.

• hover시 움직이는 애니메이션 효과

1) 기본 카드에 적용
.main .card {
  transition: transform 0.15s cubic-bezier(0.33, 0.66, 0.66, 1), -webkit-transform 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}  
2) hover시 카드에 적용
.main .card:hover {
  box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.16), 2px 0 2px 0 rgba(0, 0, 0, 0.16), 0 2px 2px 0 rgba(0, 0, 0, 0.23);
  transform: translateY(-3px);
}  
기본값에도 지정을 해주어야 올라왔다가 내려갈때도 자연스럽게 애니메이션이 표현됨.

• mixin

mixin은 클래스 저장소라고 이해
인자값을 받을 수도 안받을 수도 있음.
보통 컴파일 변환 안하기 위해 _ 를
이름 앞에 붙임.
/*
%max-line {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
}
*/
//변수 넣게 하는 법
@mixin max-line($line-number) {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line-number;
  display: -webkit-box;
  overflow: hidden;
}

• 아래 화살표 CSS 코드

  .select-box:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    margin-top: -1px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
  }
  *경우에 따라 before 자리에 after 써도 된다.

• hover시 버튼에 투명도 주기

.class:hover {
background-color:rgba(255,255,255,1);
cursor: pointer;
}
마지막 숫자 차이
0  ------- 0.5 ------- 1
완전투명    반투명      불투명

• pointer-event: none;

 마우스를 올려도 아무 변화가 없도록 할때

• __

##03 Sites

https://caniuse.com/ : _css 문법 검색,해당 기능이 브라우저에서 지원하는지 확인가능

wrapboootstrap.com

chrome://extensions

[https://subicura.com]/(https://subicura.com/)

제트셸

##04 Bookmark

[CSS PDF]

p.19 속성선택자

p.38 요소간 수직정렬

p.128 SASS 중첩

##05 Question

1 .1 row2-col2의 font-size: 100% ? .2 반응형 웹이라 overflow: hidden; 안먹히는것? .3 row3에 height: 1000% 줘도 차이 x 이유 .4 /wired/scss/main.scss

// 이미지가 오른쪽에 있는 카드의 경우 &.right-image { height: 160px;

& img {
  width: inherit;
  height: 100%;
  float: right;
}   }

1. MacDown 사용법관련 : 줄바꿈 / 색깔 / 박스안 / 글씨 / 줄바꿈 / HTML문법사용가능? / 왼쪽 바(>로 만든) 없애기 / 검색기능 or 색인기능 / 코드가 찌그러짐 or 코드 줄바꿈하는데 너무 귀찮음 / 취소선

2. clearfix에서 height: 0; 지정?

// &:after { // content: ‘’; // height: 0; // display: block; // clear: both; // }

1. margin-left: -0.25em;

2. text-overflow vs overflow

3. 스타일은 나중에 한게 적용

vs

스타일 적용 순서 inline > ID > class > tag ex) <p> 1000 100 10 1

–

• 부트스트랩 한 부모 안에 그리드 3이라는 클래스를 주는 요소와 그리드 9라는 요소 3+9 = 12

3/12 div와 9/12 쓸 수 있는거야 그러면 부트스트랩 까보면 각각 miss -% 되잇고, 그래서 정의해놓은 스타일 쓰는거지. 거기 너무 많은 스타일이 정해져있어서 커스터마이징하는게 너무 힘듦. 컬러는 뭐. 내가 원하는 스타일로 바꾸는게 힘듦. 가져올때 색깔 다빼고, 보더 다빼고 가져올 수 있지.

width: 90%; <-> max-width: 150px;

p * {

}

.class * {

}

.class.class2

/*

• p {

} */

=

p {

}

2/1

• button중 button 타입은 아무 기능없는 그냥 버튼 -> 자바스크립트로 기능 줄 때 사용 but 하위 브라우저에서 안되는 경우도 있다고 함.

• a태그의 height와 인라인 요소 때문에 div을 a 태그로 감싸서 쓰는 경우도 있다고 함 -> 이럴경우 div의 영역이 a 태그의 선택영역이 됨.

• input / select / optgroup 등등 입력요소는 form 태그와 같이 쓰는데 전달 방식 GET or POST 방식을 정하기 위함.

• form의 기본 속성은 block

• 단순히 특정 주소로 이동할 때는 angker tag (a tag)를 사용 -> a태그를 form으로 굳이 감쌀 필요가 없음

*