1. HTML&&CSS 기초 - 3

강의를 들으면서 중요하다 생각한부분과 연관되어서 생각한부분을 작성했습니다.

강의 보러가기

---

1. 정의
   • W3Schools -> run css -> css reference -> 원하는것 클릭
   • 속성값, 관련 페이지 확인가능 -> 정의 : 용도, 스펙(기본값, 상속, 애니메이션, 버전, 등), 브라우저지원 여부,
   • syntax : 선언 가능 값, ie는 initial 지원안함, inherit은 no일경우 사용 불가
   • 간단한 스펙과 예제 확인에 용이
   • mdn -> 기술 목록 -> css -> 완전한 사이즈 -> 원하는것 클릭 -> syntax
   • w3c와 유사 -> css속성과 값에대한 깊이있는 데이터 제공
   • 개발적 버그와 스펙에대해서 확인할 때 용이
2. CSS 속성
   • 절대 길이
     • px(pixels) : 가장 많이 사용, 화면의 한개의점과 같다, 장치의 해상도에 따라 상대적 단위, 화면에서 고정된 크기값을 가지고 있기때문에 절대길이
     • pt(points) : 인쇄물등의 표준단위, 인쇄물 표시시 유용, 사용하는 기기에 따라차이가있다. window -> 9pt == 12px, mac -> 9pt == 9px, web개발시 권장하는 단위가아니지만 디자이너가 전달해주면 편의상 같은값의 px로 개발
   • 상대 길이
     • %(percentage) : 부모값에서 백분율로 환산한 크기
     • em(font size of the element) : 선언한 해당 폰트의 font-size를 기준으로 값을 환산하며 소수점 3자리까지 가능
     • rem(root ...) : root의 font-size기준
     • vw(viewport width) : 값을기준으로 1%로 계산
3. 속성-색상
   • 컬러키워드
     • 16진법 6자리 : 레드|그린|블루
     • 16진법 3자리 : aacc11 -> ac1
     • RGB : (0, 0, 0)
     • RGBA : (0, 0, 0, 0) : 마지막 알파값을 선언해주지않으면 제대로 적용되지 않음 -> 투명도값
4. 속성-배경
   • background-color : 색상 rgb등 사용가능, 기본값은 transparent
   • background-image : 기본값 : none, 격자무늬 -> 투명배경, 이미지 경로 입력, x, y가 이미지보다 클 경우 반복 됨
   • background-repeat : default = repeat, 반복여부와 방향을 지정
   • background-position : left top -> 왼쪽 : x축, 오른쪽 : y축, pixel로 지정시 0,0값을 기준점으로 10px 10px로 지정 가능, %도 가능
   • background-attachment : default=scroll, 스크롤에 따른 배경의 움직임 여부-> 브라우저 성능에 영향을 미쳐 많이 사용되지 않음
   • 축약형 : background : green url("") no-repeat fixed center
   • background-size : 배경의 크기 지정
   • background-origin : 배경의 위치 기준을 border, padding,content중 무엇으로 잡을건지 결정
   • background-clip : 배경의 넓이 기준을 border, padding, content, box로 잡을건지 결정
   • background-blend-mode : 요소가 겹칠 경우 색상에 대한 정의
5. 속성-boxmodel
   • html은 모두 사각형 형태로 만들어진다
   • 4가지 영역으로 존재, 개발자도구에 박스가 존재해 쉽게 확인가능
   • content, padding, border, margin : 바깥여백으로 다른요소가 있다면 박스와 박스사이 여백을 마진이 지정
6. border
   • width : length, thin, medium, thick
   • style : 점선, 점, 실선, 이중선 등등 존재
   • color : 색상 지정, 사선으로 칠해지기 때문에 디자인대로 원하는대로 표현안될 수 있음
   • 축약형 : 1px solid #000
   • 방향에 따라서도 축약형 가능
7. padding : length | initial|inherit
   • length : top, right, bottom, left -> 축약 : 0 0 0 0 -> top right bottom left 순서로 선언, 상하와 좌우가 같은값을 가진다면 -> 0 0 으로 선언가능
8. margin : length|auto|initial|inherit
   • length : padding과 동일
   • auto : 가로축을 정렬할 때 사용 -> 꼭 width가 선언이 되어 있어야 한다. -> 축약형 존재 -> 상하도 auto를 사용하는 경우도 있는데 기본적인 flow에는 적용되지 안아 응용에서 배움
   • collapse : top값과 bottom값이 겹치게되면 더 큰값이 적용이 된다.
     • 부모 요소의 상단 마진과 첫 자식 요소의 상단 마진은 collapse
     • 부모 요소의 하단 마진과 첫 자식 요소의 하단 마진은 collapse
     • 내용이 없을 경우 해당 요소상단과 하진간 collapse
   • margin과 padding의 특징 : margin은 - 가능, 둘다 px, %사용 가능 -> 요소의 가로축을 기준으로 적용
   • margin에 - 사용시 기준을 무시하고 -만큼 이동한다.-> 상속안됨
9. width : default = auto, px %...
   • box size = padding + border + content
   • 자식요소의 content %값은 부모요소의 content값에 영향을 받는다 -> 부모 content * 50% + margin+padding 자식의 크기
10. height: auto|length|initial|inherit, default = auto
    • 50%로 했을때 안되는 이유 : containing block의 %이기 때문에 parent의 높이값이 지정되어져있지않다면 제대로 적용되지 않는다.
11. CSS속성 - font
    • typography 구조 : baseline : x를 기준으로 밑 부분 : baseline, 크기 ex, t등 위아래로 뻗어 나가는것 em, 아래 사이즈 : descender, 위 사이즈 : ascender
12. font-family
    
    • family-name|generic-family|initial|inherit : ex)font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif(generic-family)
    • generic-family : family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을시 폰트를 선택할 수 있도록 함 -> child 경우에 재선언 경우에도 다시 선언해주어야함
13. line-height : normal|number(only num)|length|initial|inherit
    • line-height: 줄 간격은 줄로써 제공한다 ->
    • font-size와 행간간 차이가 홀수, 짝수인경우 브라우저마다 해석하는 방법이 다르다.
    • number와 %는 다르다 -> number는 부모값이 그대로 상속되어 자식요소의 font-size를 기준으로 계산된값을 가진다. %는 부모요소에 서 %가 그대로 상속되는게 아닌 이미 계산된 값이 넘어온다.
      • body { font-size: 20px; line-height: 2; } /* line-height = 40px; */
      • p { font-size: 10px; } /* line-height = 20px; */
      • body { font-size: 20px; line-height: 200%; } /* line-height = 40px; */
      • p { font-size: 10px; } /* line-height = 40px; */ -> 내것에서 계산한것이 아닌 부모에서 계산된값이 그대로 상속된다.
14. font-size : default=medium|xx-small|x-small|small|large}x-large}xx-large...length|intial|inherit
    • 절대적 사이즈 즉 =xx-small등은 브라우저마다 값이 달라 잘 사용하지 않는다.
    • 미지정하면 16px(1em)
15. font-weight : default=normal|bold|bolder}lighter|number|initial|inherit
    • string의 경우 기본적으로 bold를 가지고 있다.
    • normal = 400, bold = 700 -> 100단위로 이름을 가지고는 있다. device별로 굵기가 다르다. 수치가 적용이 되지않는 family도 존재한다.
    • normal과 bold만 지원하는 폰트의 경우 100~500dms normal, 600~900은 bold다.
16. 속성-font-style
    • font-style : default=normal|italic|oblique}initial|inherit
    • 일반적으로 italic과 normal을 가장 많이 사용, oblique는 italic보다 더 많이 기울임
17. 속성-font-variant : default=normal|small-caps|initail|inherit
    • small caps =소문자를 작은 대문자로 바꿔준다.
18. font : 글꼴 속성의 축약형 -> 실무에서 지양 ->font에 대한 다양한 값을 가져야하며 선언순서를 지켜야 한다.
    • font-size, font-family는 반드시 선언해야한다.
    • 빠진 속성은 기본값으로된다.
19. 웹 폰트(@FONT-FACE) : 사용자의 로컬에 글꼴을 다운받아 적용
    • 시스템 폰트 : font-family로 선언 된 글꼴
    • 이미지 폰트 : 이미지를 잘라서 제공되는 폰트
    • 웹 폰트 : 다른 글꼴을 서버에 저장해서 제공하거나, 경로를 가져와 제공하는 폰트 -> src, font-family (필수)/font-style, font-weight
20. vertical-align : 인라인 요소나 테이브셀 상자의 수직 정렬을 지정함 -> 부모의 요소에 상대적으로 정렬됨
    • middle : 소문자 x의 중간요소의 중간지점을 위치하게 한다.
    • length : 요소를 지정한 길이만큼 올리거나 내림. 음수허용
    • 요소를 line-height를 기준으로 올리거나 내림
21. text-align : 텍스트의 정렬을 지정
    • justify : 텍스트를 양쪽 끝에 붙여서 정렬하나 마지막 라인은 정렬하지 않음
    • inline-level에만 적용되고 block-level에는 적용안됨
    • block요소를 가운데 정렬하고자한다면 margin을 auto로 해야한다.
22. text-indent
    • 들여쓰기 속성으로 length를 통해 -사용시 왼쪽으로 이동
    • width사용시 부모를 기준으로 퍼센트 지정
23. text-decoration : none|overline|line-through|underline|initial|inherit
    • 기본값 : none currentColor solid
    • 라인의 상세값은 여기선 설정 불가
24. 단어 관련 속성
    • white-space : 공백관련
    • normal, nowrap -> 공백이 무시되면서 한줄로 쭉 나간다 -> nowrap과 normal을 주로 사용한다.
    • letter-spacing : 자간 -> 상속됨, length값으로 선언해줄 수 있다.
    • word-spacing : 단어간의 띄어씌기등 조절, 음수도 가능
    • word-break : 단어가 라인 끝에나올 경우 어떻게 처리할지 지정
    • word-wrap : 영역을 침범해서 나가는 텍스트들을 어디서 자를것인지