개발공부/HTML|CSS|JavaScript

[HTML/CSS] 기억할 것 정리

HyunJng 2022. 10. 25. 19:53

W3School사이트를 이용하여 한번 공부했었다.

웬만한건 쉬워서 의도하지않아도 외워졌지만

헷갈리거나, 내 기준 잘 꺼먹을 것 같아 나중에 한번 다시 보면 좋을 것들을 따로 적어놓기 위해 작성한다.

 

 

HTML

  1. block-level
    <p>, <hr>, <pre>, <ul/ol>, <form>, <table>,<fieldset>, <address>
  2. inline-level
    <span>, <object><img><br><input><textarea><label><button>
  3. 표: <table><capation>(<colgroup><col>)<thead><tbody><tfooter><th><td>
  4. 링크 : target: _blank
  5. form의 attribute
    - action : 데이터 처리해줄 서버상 프로그램 지정 (ooo.php 등)
    - name : 폼을 구분하기위해
    - method : 서버에 어떤 형태로 데이터를 넘겨줄지 (post(더 많이 사용), get)
    - target : 창을 어디에 띄울지(_blank)
    - autocomplete : 이전 입력을 띄울지말지 (on이 defualt)
  6. form : <filedset><legend><label><input>
  7. input에서 id는 tag를 위해, name은 value를 보내기위해, placehold는 설명을 위해 사용
  8. input type 중
    - image : submit기능이 내장됨
    - button : 내장 기능 없이 그냥 버튼. onclick으로 Javascript함수와 연결해서 사용함.
    그냥 <button>에서 type을 submit으로 선택해도 됨
  9. input attribute
    - required : 반드시 입력해야함
    - autofocus : 맨 처음 커서 놓여짐
    - readonly : 사용자 지정 막음
    - checked : radio, checkbox 체크되서 시작
  10. 하위선택 (drop down)
    - <select>
    - <optgroup label="">
    - <option>
  11. 하위선택있는 text
    - <input type="text" list="a"> : text를 datalist와 연결
    - <datalist id="a">
    - <option value="" label="">
  12. 사용자가 처음 마주하는 html파일의 이름은 index.html 이어야만 한다.

CSS

  1. 우선순위
    - 사용자ss 중요> 제작자 ss 중요> 제작자 ss일반 >  사용자ss일반 > 브라우저ss
    - 위가 충돌하면 : 인라인 > id > class > tag
    - 위가 충돌하면: 더 밑에 있는 소스
  2. 자식 요소에서 별도로 스타일 지정하지 않으면 부모 style을 자식이 상속하나 모든 속성이 상속되지 않음
  3. 상속 안되는 속성
    - background-color

폰트/텍스트

  1. font 단위
    - em: 부모요소에서 지정한 글꼴의 M너비 = 1em, 없으면 1em = 16px << 모바일까지 고려한다면 사용 권장
    - ex: 해당 글꼴의 x를 기준 크기로
    - px : pixel
    - pt : point. 일반문서에서 많이 사용
    - vw : viewport 전체 width의 1%
  2. font: 글자 자체에 관한 것 (font-size, font-family, font-weight, ...)
    text : 글, 문장에 관한 것 (color, text-decoration, text-align, line-height, ...)
  3. line-height는 글자크기의 1.5 ~ 2배면 적당
  4. link의 밑줄을 제거할 때는 text-decoration:none
  5. 박스내부 중앙정렬 : line-height:부모높이, text-align: center
  6. 줄바꿈 방지 : white-space:nowrap

리스트

  1. list의 불릿 유형 변경 list-style-type : none , list-style-image:url()
  2. dl - dt - dd 도 있다.

block요소

  1. width는 block-level element만 적용된다.
    - width는 content의 크기만 적용. 만약 content + padding + border까지 적용되고싶다면 CSS에 box-sizing : border-box 을 적용해주어야한다.
  2. display : 화면 배치방법 결정 (inline <-> block, inline-block, none)
    - display : none은 공간을 차지하지 않음
    - visible : hidden은 공간을 차지함.

포지셔닝

  1. float : right | left | none
    - 웹 요소가 화면에 부유하서 왼쪽/오른쪽 구석에 배치되도록 한다.
    - 그 주변의 다른 요소가 감싸게 됨.
    - right, left하면 display 속성은 무시됨.
  2. clear : none | left | right | both
    - float의 영향을 받는 다른 요소가 겹치는 것을 막아줌.
  3. position : static | relative | absolute | fixed
    - static: 문서의 흐름대로 배치. float속성으로 배치함(다른 것들도 float 같이 쓰기 가능)  << defualt 
    - relative : 문서 흐름대로 배치되는 것을 기준으로, top, left처럼 좌표값으로 위치선정
    - absolute : 가장가까운 부모/조상 중 position: relative인 것을 기준으로, top, left처럼 좌표값으로 위치 선정
    **** absolute만 지정하고 offset을 지정하지 않으면 기본위치 auto(static일때)를 기준으로 함.
    **** 부모는 absolute한 자식을 없는 취급하고 다음 요소가 그 자리를 차지하게 됨.
    - fixed : 브라우저 창의 왼쪽 위 꼭지점을 기준으로, top, left처럼 좌표값으로 위치 선정
     단, 브라우저 창을 스크롤 해도 계속 고정
  4. z-index
    - 요소 위에 요소를 쌓을 때 쌓는 순서. 작을수록 아래. 

표

  1. caption-side : top | bottom
    - 캡션 위치
  2. border-collapse : collapse | separate
    - <table>태그에서 border을 설정했을 때, 셀 테두리도 설정되는 것을 그냥둘지, 합칠지 결정.
  3. border-spacing : <간격>
    - 셀테두리와 표테두리 사이의 간격을 결정
  4. empty-cell : show | hide
    - 내용 없는 셀의 테두리를 그려 보여줄지, 말지를 결정
  5. <table> width만 지정하고 <tr, td, th>에 대해 지정하지 않으면 cell에 들어있는 내용에 따라 동일한 비율로 width 지정함수
  6. table-layout : fixed | auto
    - 영문이 여백없이 길게 입력할경우 width속성이 무시되고 영문길이에 따라 결정되지 않도록 고정 가능
    - 단, 이럴경우 아래 속성도 같이 작성해야함.
    word-break : break-all <<너비 안에 글이 표시되도록 함
    height : auto

시멘틱태그

  1. <header> :머리말 영역
    <section>: 콘텐츠를 주제별로 묶을 때 사용
    <aside> : 사이드바 영역
    <footer>: 저작권이나 제작자 연락처 등을 표시
  2. <nav> : 네비게이션 
    <article> : 컨텐츠내용
    <address>: footer안에 제작자이름이나 연락처 또는 웹사이트 관련 우편주소 등을 넣을 때 사용
  3. <iframe> : 웹문서 안에 다른 웹 문서를 삽입
  4. <div>는?
    => 콘텐츠에 css를 적용하기 위해 묶을 때 사용

combination selector

  1. 하위선택자 : (공백), 부모요소에 포함된 하위요소(자식, 손자...) 모두에 스타일 적용
  2. 자식선택자: >, 자식요소에만 스타일 적용.손자X
  3. 인접형제선택자: +, 같은 부모요소를 가지는 형제 중 첫번째 동생에만 스타일 적용.
  4. 형제선택자: ~, 같은 부모요소를 가지는 형제들 모두에게 적용.

속성선택자

  1. 대괄호[ ] 이용
    ex) a[href] : <a>태그 중 href라는 속성이 있는 요소에 적용
  2. [속성 = 값] : 속성 정확히 일치
    ex) a[target="_blank"] : <a> 태그 중 target속성의 값이 "_blank"인 요소만 적용
  3. [속성 ~= 값] : 속성이 여러 개일 때 하나가 일치하면 적용.
            그러나 일부 일치가 아니라 한 단어로 일치해야함
    ex) [class~='button']: 클래스에 'button"이 포함되면 적용
    -> class="button",  class="flat button": 적용O
    -> class="flat-button', class="buttons": 적용X
  4. [속성 |= 값] : '~='와 같으나 하이픈(-)으로 연결된 것도 적용
    ex) a[title|="us"] : <a>태그 중 title속성에 "us"가 포함되면 적용
    -> title="us", title="us-english" : 적용O
  5. [속성 ^= 값'] 지정된 문자로 시작하는 속성 값에 대해서만 스타일 적용
    ex) a[title ^= "eng"] -> title="english" 적용O
  6. [속성 $= 값]: 지정한 문자로 끝나는 속성 값에 대해서만 스타일 적용
    ex) a[href $= "hwp"] -> href="intro.hwp" 적용O
  7. [속성 *= 값] : 지정한 문자가 어디든 포함되면 스타일 적용
    ex) [href *= "w3"] -> href="https://www.w3c.org/TR/html" 적용O

가상클래스(pseudo 클래스)

<상태에 따른 가상클래스>
주의 : 1 ~ 4번을 정의할 때 이 순서대로 해야지 제대로 적용됨

  1. :link - 방문하지 않은 링크에 스타일 적용
  2. :visited - 방문한 링크에 스타일 적용
  3. :hover- 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용
  4. :active - 웹 요소를 활성화 했을 때(누르고 있을 때) 스타일 적용
  5. :focus - 웹 요소에 초점이 맞추어 졌을 때(ex. 텍스트필드에 마우스커서를 누름) 스타일 적용

<UI 요소에 따른 가상클래스>

  1. :enabled, :disabled - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
  2. :checked - 라디오 박스나 체크박스에서 해당 항목을 선택했을 때의 스타일 지정

<구조 가상클래스>

  1. :nth-child(n) - n번쨰 위치의 요소에 적용, n에는 0부터 차례대로 정수 대입.(모두 한 부모 요소여야함, 수식가능)
  2. :first-child, :last-child

transition

  1. transition-property : all(default) | none | <속성이름>
    - 어느 속성에 적용할 것인지 
    ex) transition-property : width, height
  2. transition-duration: <시간>
    - 진행 시간 (s / ms)
    ex) transition-duration: 2s, 1s;
  3. transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier(n,n,n,n)
    - linear : 시작부터 끝까지 똑같은 속도
    - ease: 처음에는 천천히, 점점빨라지다 마지막에 천천히(default)
    - ease-in: 시작을 느리게
    - ease-out: 느리게 끝남
    - ease-in-out: 느리게 시작 느리게 끝
    - cubic-bezier(n,n,n,n): 베지에 함수를 직접 정의해서 사용. n은 0~1
  4. transition-delay: <시간>
    - 언제 시작할지(s, ms)

layout

  1. viewport
    : 웹문서 내용이 보이는 영역. 대부분의 스마트폰은 웹키트 기반 브라우저인데 기본 뷰포트는 980px이다.
  2. 가변그리드(fluid layout)
    : 12칼럼 그리드를 가장 많이 씀.모든 요소를 백분율로만 지정. 
    처음은 고정단위로 만든 다음 백분율 계산으로 바꾸는 것도 방법
  3. 가변폰트단위
    해당 기기에 맞춘 픽셀의 크기로 계산되어 표시.
    - em : 지정 없으면 1em = 16px. 부모글꼴을 기준으로 하기에 중첩되면 문제가 생길 수도 있다.
         ex)  부모 [container(12px) - header (2em = 24px) - nav(1em = 24px)] 자식
    - rem : 최상위 element(root)를 기준 크기 지정. 
  4. 가변이미지
    1) max-width: 100%
      - 이미지가 부모 요소만큼만 커지거나 작아지도록함.
      - 이미지의 크기가 변하면서 이미지 해상도가 깨질 수도 있음
    2) srcset="<이미지>[.<이미지2>, <이미지3>,...]"
    - 해상도에따라 나오는 이미지 변경 가능
    - 너비값이나 픽셀밀도를 이미지 옆에 넣어 표시.
    3) <picture><source>태그
    - 기기 화면 너비에 따라 다른 이미지 파일 표시
  5. 순서
    1) 필요한 글 구상하기
    2) 프로그램이나 펜으로 사이트 전체 디자인 그려보기
      - 이때 콘텐츠와 콘텐츠 사이의 마진, 박스와 내부 콘텐츠 사이의 패딩까지 고려할 것
    3) <#container><header><section><footer>에서의 margin, padding등 기본적인 것을 먼저 지정하여 전체 구조 만들기
    4) 위에서부터 세부적인 디자인 해주기
      - 메뉴 항목은 %로 지정하면 너비를 줄였을 때 보기 안좋아서 px로 둠

미디어쿼리

  1. @media [ only | not ] 미디어유형 [and 조건]
    ex) @media screen and (min-width:200px) and (max-width:360px)
    - only : 미디어쿼리 지원하지 않는 브라우저는 미디어쿼리 무시
    - not : 지정하는 미디어 유형을 제외
  2. 조건
    1) 뷰포트기준: width, min-width, max-width
    2) 단말기기준: device-width, min-device-width, max-device-width
    3) 회전기준: orientation:port(세로), orientation:landscape(가로)
  3. 중단점
    : 서로다른 CSS를 적용할 화면 크기. 모바일, 테블릿, 데스크탑만 고려할 것
    - 스마트폰: min-width:320px(세로) min-width:480(가로)
    - 태블릿: min-width:768px
    - 데스크톱: min-width: 1024px // 부트스트랩은 992px이상으로 함
  4. 미디어쿼리 CSS외부에서 연결
    <link href="css파일 경로" media="screen and (min-width:768px)" rel="stylesheet">
  5. 모바일 버전으로 CSS만들고 점차 키워가기

flexible box layout

그리드 레이아웃을 기보능로 해 블렉스 박스를 원하는 위치에 배치하는 것

  • <용어>
    1. 플렉스 컨테이너
      : 웹 요소들을 플렉서블하게 사용하려면 먼저 플렉스 컨테이너로 감싸야함
    2. 플렉스 항목(flex item)
      : 컨테이너 안에 담기는 웹 요소
    3. 주축(main axis)
      : 요소를 담는 기본 방향. 왼쪽에서 오른쪽 수평방향
    4. 교차축(cross axis)
      : 위에서 아래로 세로방향.
  • container 기본속성
    1.  display:flex
      : 레이하려는 요소를 감싸는 부모 요소를 만들고 display:flex로 설정해야함.
    2. flex-direction: row (default) | row- inverse | column | column-inverse
      : 주축을 어느 방향으로 할 지 결정
    3. flex-wrap : no-wrap | wrap } wrap-reverse
      : 요소가 container을 넘쳤을 때 한줄로 표시될지, 여러줄에 표시될지 결정
      - no-wrap : 요소의 width를 좁혀서라도 한 줄로 표시(defualt)
      - wrap : 요소의 width를 지켜 여러 줄에 표시
      - wrap-reverse: 여러 줄로 표시하되 기존 방향과 반대로 배치
    4. flex-flow : <flex-direction> <flex-wrap>
      : 2번, 3번 한꺼번에 지정가능
    5. justify-content : flex-start | flex-end | center | space-between | space-around
      : 요소를 주축방향으로 배치할 때의 배치기준
      - space-between : 첫번째 요소와, 마지막 요소를 시작점과 끝 점에 배치한 후 중앙 요소들은 같은 간격으로 배치
      - space-around: 모든 요소를 같은 간격으로 배치
    6. align-items : stretch | flex-start | flex-end | center | baseline
      : 교차축 기준 배치방법(한 줄)
      - stretch : 요소의 height를 확장해 교차축 꽉 채움(default)
      - flex-start : 교차축 시작점을 기준으로 배치
      - flex-end: 교차축의 끝 점을 기준으로 배치
      - center : 교차축의 중앙을 기준으로 배치
      - baseline: 시작점과 글자 기준선이 가장 먼 요소를 시작점에 배치하고 그 글자의 기준선과 다른 항목의 기준선을 맞추어 배치
    7. align-content : flex-start | flex-end | center | space-between | space-around
      : 교차축 기준 배치방법(여러줄)
  • 요소 속성
    1. order:1, 2, ...
      : 요소의 배치순서 변경
    2. flex : [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial
      - <fles-grow> <flex-shrink> <flex-basis>
      : 요소의 너비를 얼마나 늘릴지 숫자로 지정, 동일한기능, 요소의 기본 크기 지정(지정없으면 auto)
      ex) flex: 1 1 0; - 늘이거나 줄이지 않음,
            flex: 2 2 0; - 2배 늘이거나 줄임
      - initial :요소의 width/height값을 따르나 컨테이너 공간이 부족한 경우 최소 크기까지 줄임.
      - auto: 요소의 width/height값을 따르나 컨테이너 공간이 부족한경우 컨테이너 크기에 따라 늘이거나 줄임
    3. align-self: auto | stretch | flex-start | flex-end | center | baseline
      : 요소를 교차축 기준으로 배치할 때 기준.(align-item과 다르게 요소 개별적)

구상순서

  1. 처음부터 모바일, 태블릿, PC의 레이아웃을 구상하고 옮길 부분을 결정
    - 모바일 -> 태블릿 -> PC순으로 만들 것
  2. 요소들을 어떻게 나눠서 어떤 태그(아이디, 클래스까지)로 어떻게 감쌀 건지 결정
  3. html 요소 먼저 다 작성
  4. 구상한대로 섹션 나눠서 태그로 감싸 이름 부여하기
  5. CSS
    1) 문서 전체 스타일 지정하기(margin, padding, 전체배경화면, 텍스트)
  1. margin collapse
    상위 element의 bottom margin과 하위 element의 top margin 사이의 margin의 크기가 모두 적용되는 것이 아니라 margin이 큰 쪽의 element 하나만 적용된다.
  2. 로렘임숨 : 의미없이 내용 채우기 위한 text

 

저작자표시 비영리 변경금지 (새창열림)