본문 바로가기

공부/TIL

2019-04-02

<https://youtaekjung.github.io/2018/04/21/css/CSS-float-clearfix/>

float과 clearfix

 

명확하게 답이 안나옴 (논리적이지 못하다 ㅡ> css라는 언어를 이해 x) 상속으로부터 물려받았겠구나

자식의 값이 나에게 반영됫겠구나

CSS에서 중요한것 (핵심)

1.상속 (부모한테 지정한 속성 자식한테도 그대로) -- 상속을 잘이해야함

2.겹침 (옷여러벌 껴입기)

3.우선순위 (선택자중의 우선순위)

레이아웃 (box모델 기준 w/h+p+b+m) 관점

1.POSITION

2.FLOAT

3.DISPLAY

block

inline

inline-block

flex

grid

+추가적으로 box-sizing (content-box, border-box(마진만))

여기까지 알고 프로젝트 해보면됨 (아예 처음부터 프로젝트하면 나쁜 습관듬)

 

임배디드 OR 인터널 방식 CSS

외부에 저장해두면, 캐시에 저장해둘 수 있음 (아마 그래서 빠름?)

요청을 줄이니 서버의 부하를 줄일 수 있음

다중클래스 class = "" 띄어쓰기 ""

DOM TREE (구글링) 문서 객체 모델

노트참조

border: 2px solid black; (공백 ,대표)

선택자의 파워 ( 선택자의 개수에 따라 증가) 이해하기 위해 점수 배당했을뿐 실제로 클래스 열한개 > id는 아님

e-1

c-10

i-100

inline-style:1000

!important : 구체성 무력화 (우선순위 ↑) 재정의 불가

{div box(11점) > note(10점)

.wrapper div.box1(21점) > div.note(11점)

div.wrapper div.box1(22점) div.wrapper div.note

body div.wrapper div.box1(23)

html body div.wrapper div.box1}구체적일수록 우선순위가 높아진다 (클래스 열개를 써도 id를 쓰면 이길 수 x)

[class^="box"] 박스로 시작하는 [class$="box"] 박스로 끝나는

상속 (꾸미기가 상속, )

겹침 (나중우선)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

마크업

1.논리적인순서

2.의미에 맞는 마크업

3.네이밍

*논리적인순서

1.로고

2.텍스트링크모음

3.주요링크(메인메뉴) GNB(글로벌 네비게이션바)

디자인 우선 (2 ㅡ> 1 ㅡ> 3)

논리 우선 ( 1 ㅡ > 3 ㅡ> 2 ) 일수있음 정답X

의미있는 마크업

<img src="" alt=""> 필수 alt(대체)

ㅡ> *한국어 패치*

 

<https://cssreset.com/scripts/eric-meyer-reset-css/> 에릭마이어 css - reset

font: inherit; 상속border-collapse: collapse; 테이블에서 겹치는부분 제거

position 기본값 static 현위치 기준 relative, absolute , fixde, stiky ( fixed, relative 섞음)

멤버를 덮어버릴 수 있음 weight, height를 주지않으면 안에 컨텐츠 내용만큼 공간잡음

position: absolute;

top:0;

left:0;

****헤더의 부모는 컨테이너, 컨테이너의 부모는 바디

포지션 앱솔루트 처리된 요소는 (자신의 상위요소 부모)의 포지션이 스태틱인지 확인하고

스태틱이라면 무시하고 상위요소 , 쭉쭉 올라가서 body를 기준으로 왼쪽 상단에 배치

부모를 relative를 준다는것은 , 본인이 움직이는게 아니라 자식이 움직일수 있는 기준이되는것********

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

float , position : ablsoute, fixed 하면 태어난것과 상관없이 block박스가됨

width ,height 값이 바로 반영된다 ? block박스

inline박스 = 초록색, 값이 무시될거야 inline의 패딩값도 좌우값에는 문제가 없네

inline-block 블록처럼 동작하는데 , 흐름은 인라인이네 // 흐름은 인라인인데, 블록처럼 동작하는 거구나

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

레이아웃 작업을 하면서 마진떄문에 문제가 많음, 마진을 잘 이해하지 못하면 레이아웃 어려움

블록박스와 인라인박스의 차이에대하여

설정하지 않았을때 기본값

글자 16px -> rem (html 10px) (body 1.4rem)

serif ( 날카롭다, 삐짐있다 ) 궁서체

saus-serif() 돋움,굴림,

web font (폰트를 서버가 가지고 있고 서버로부터 받아서 사용 동일한 글꼴로 랜더링가능 vs 다운로드가 되지 않으면 완벽히 나오지 않음) --가장 먼저 선언

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2.텍스트링크모음

노멀라이즈

1.15em

부모 20px ㅡ > 10px

line-height: 1.15;

부모 20px ㅡ> 23px

부모 20px 내가 갖는거 10px line-height : 11 (라인하이트는 넘버단위로 씀 m단위 xxx)

-webkit-text-size-adjust: 100%; (밴더 프리픽스) 웹킷계열에만 100%

상속은 같은상속일때 우선순위를 정하고 나한테 직접준것은 우선순위 xx 내가 직접준것

a:link 가상상황(한번도 방문하지 않았을때 )

a:hover, a:focus{ 호버나 포커스는 기본값을 재정의 하는거라, link나 visited보다 먼저나오면 안된다

color: red; 구체성이 떨어짐 cascase 규칙 (우선순위)

}

*구조선택자 알아보기*

text-transform: uppercase;

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

처음부터 중량을 높혀놓고 ,낮추는것도 좋은 방법이 될 수 있다 (메인메뉴)

 

장애인에게 필요한건 도움이 아닌 혼자할수 있게해주는 환경

메인메뉴다시보기****

섹션요소<Section> <article><aside><nav>

span 글자만묶기 (div랑 차이) inline

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

display:none;

left:-9999em;

opacity: 0;

.readerable-hidden{

position: absolute;

width: 1px;

height : 1px;

overflow: hidden;

margin: -1px;

clip:rect(0 0 0 0);

}

작은상자로 만들고 안보이게 짤라냄

clip(짤라내기) 포지션 앱솔루트가 기본적으로 존재해야함

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

**Jekyll** 정적블로그 툴 <https://docs.google.com/presentation/d/1xb02T1-I8IORWRPQJPr26Yevc06Yv142APmtFNrcAvc/edit#slide=id.p>

풀리퀘로 추천리스트

1.GITHUB 제공하는 정적페이지

깃허브 기술 저장소

<http://rankedin.kr/users?page=5>

<https://github.com/jojoldu/junior-recruit-scheduler>

  1. **TIL(Today I Learned)로 매일 배운 내용이나 느낌 정리하기 (일일커밋은 덤으로 얻음)**

  2. **스택오버플로우 등을 통해 본 코드 따라 쓰고 정리하기**

  3. **프로그래밍 책 읽고 챕터별로 요약해 보기**

  4. **프로젝트 계획이나 진행상황을 쓰기**

  5. **라이브러리나 패키지 설치 howto 및 사용후기**

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

반응형

'공부 > TIL' 카테고리의 다른 글

2019-04-05  (0) 2019.04.05
2019-04-04  (0) 2019.04.04
2019-04-01  (0) 2019.04.01
2019-03-30  (0) 2019.03.30
2019-03-29  (0) 2019.03.29