0203_TIL

이종현·2022년 2월 3일
0

TIL

목록 보기
12/20
post-thumbnail

Web

HTML

  • Hyper Text Markup Language

MarkDown => 문서 작성 시에 구조와 내용을 함께 적기 위해 만들어진 마크업 언어

HTML 기본 구조

  • html : 문서의 최상위 요소
  • head : 문서 메타데이터 요소
    • 문서 제목, 인코딩, 스타일, 외부 파일 로딩 등
    • 일반적으로 브라우저에 나타나지 않는 내용
    • 예시 ) <meta> <link> <script> <style>
  • body : 문서 본문 요소
    • 실제 화면 구성 과 관련된 내용

head 예시

  • 메타 데이터를 표현하는 새로운 규약
    • 메타 데이터 : "데이터의 데이터"

DOM ( Document Object Model ) 트리

  • 텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조 ( 문서를 구조화 된 표현으로 보자 )
    • HTML 문서에 대한 모델을 구성
    • HTML 문서 내의 각 요소에 접근 / 수정에 필요한 프로퍼티와 메소드를 제공

요소 ( element )

  • HTML 의 요소는 태그와 내용 (contents) 로 구성되어 있다.
  • 요소는 중첩( nested ) 될 수 있음 (요소 안에 요소를 넣을 수 있다.)

속성 ( attribute )

  • <a href(속성명) = " (속성 값) ">

    • 속성 작성 방법 통일하기

  • 태그 별로 사용할 수 있는 속성은 다르다

  • 속성을 통해 태그의 부가적인 정보를 설정할 수 있음

  • 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공

  • 이름과 값 쌍으로 존재

  • 태그와 상관없이 사용 가능한 속성 들도 있음

    • id , class , style
    • data * - : 데이터를 저장하기 위해 사용

시맨틱 태그

  • HTML5 에서 의미론적 요소를 다음 태그의 등작
    • 기존 영역을 의미하는 div 태그를 태체하여 사용
      • div , span , p 를 제외한 대부분 요소가 시맨틱 태그
  • 태그 목록
    • header : 문서 전체나 섹션의 헤더
    • nav : 내비게이션
    • aside : 사이드에 위치
    • section : 일반적인 부분
    • article : 사이트안에 독립적
    • footer : 문서의 마지막 부분
  • 검색엔진최적화 를 위해 메타태그, 시멘틱 태그를 통한 마크업을 효과적으로 사용해야함

그룹 컨텐츠

  • pre태그 : 글자와 크기 모두 정의되어있는 것으로 사용됨
  • ol , ul : 순서가 있는 , 없는 리스트
  • div : 의미 없는 블록 레벨 컨테이너
  • p : 하나의 문단
    • div , p 의 차이 => p 태그안에는 인라인 요소만, p 태그 안에 div 태그 사용불가 ( 반대는 가능 )

Table

  • thead , tbody , tfoot 활용
  • tr 은 가로줄 내부에는 th 혹은 td 로 셀을 구성
  • colspan , rowspan 속성을 활용하여 셀 병합
    • colspan -> column를 합쳐짐 : 세로인 값들이 합쳐져 가로처럼 보임 ( 세로 줄을 없앰 )
    • rowspan -> 가로줄이 합쳐져 세로처럼 보임 ( 가로줄을 없앰 )
  • caption : 표 설명

form

  • 서버에 데이터를 제출
  • 기본 속성
    • action : form 을 처리할 서버의 URL
    • method : form 을 제출할 때, 사용할 HTTP 메소드 ( GET 또는 POST )
      • get => 데이터를 쿼리스트링에 담아서 요청하는 방식 ( 보안이 약함 )
      • post => body에 담겨진 뒤 요청 ( 보안이 강함 )

input

  • 다양한 타입을 가지는 입력 데이터 유형과 위젯이 제공
  • 대표적인 속성
    • name : form control 에 적용되는 이름
    • value : form control 에 적용되는 값
    • required (무조건 입력)

input label

  • label을 클릭하여 input 자체의 초점을 맞추거나 활성화 시킬 수 있음

    • 사용자 편의성이 높아진다.

  • 에 id 속성을 에는 for 속성을 활용하여 상호 연관 시켜야 한다.

  • checkbox : 다중 선택 

      <!-- check 박스는 name 을 똑같이 설정해줘야 한다. -->
      <div>
      <input id="html" type="checkbox" name="language" value="html">
      <label for="html">HTML</label>

      <input id="python" type="checkbox" name="language" value="python">
      <label for="python">파이썬</label>

      <input id="python" type="checkbox" name="language" value="java">
      <label for="java">자바</label>
      </div>
  • radio : 단일 선택 
      <!-- radio 도 name을 똑같이 설정해 줘야 한다.
      name 부분을 갖지 않게 설정할때는 다중선택이 될 수도 있기 때문에, 똑같이 설정 해 줘야 한다. -->
      <!-- radio -->
      <div>
      <input id="happy" type="radio" name="mood" value="happy">
      <label for="happy">행복</label>
      <input id="sadness" type="radio" name="mood" value="sadness">
      <label for="sadness">슬픔</label>
      <input id="neutral" type="radio" name="mood" value="neutral">
      <label for="neutral">중립</label>
      </div>

CSS

Cascading Style Sheets

<!--selector 선택자-->
h1{
	color : blue ; <!--# 각각의 스타일은 세미클론으로 끝나야 한다 --> 
	font-size : 15px;
}
  • 쌍으로 이루어져 속성과 값이 있음

정의 방법

  • 인라인

  • 내부 참조

  • 외부 참조 - 분리된 CSS파일

    • 무조건 이걸로 씀

    • <link rel="stylesheet" href="style.css">

>>>
style.css
h1{
  color: aqua;
  font-size: 200px;
}

CSS selectors

  • 기본 선택자
    • 전체 선택자 , 요소 선택자 ( 요소 : h1, h2, div, span 등등 )
    • 클래스 선택자 , 아이디 선택자, 속성 선택자
      • 클래스 선택자 : .my_class{} 형식으로 선택 (html 해당 요소에 클래스를 설정 해줘야 함)
      • 아이디 선택자 : #my_id{} 형식으로 선택 (html에 아이디를 설정해 줘야함)
  • 결합자 -> 요소들을 몇개를 묶어서 해당 조건을 만족하는 요소만 선택
    • 자손 결합자, 자식 결합자
      • 자손 결합자 (A B {} )
        • A의 자식들 중에서 B를 만족하는 모든 것 선택
      • 자식 결합자 ( A > B {})
        • A의 자식 중에서 B를 만족하는 것만 선택
    • 일반 형제 결합자, 인접 형제 결합자
      • 일반 형제 결합자 ( A ~ B {})
        • A의 모든 형제 요소 중에서 B를 만족하는 것
      • 인접 형제 결합자 ( A + B {} )
        • A의 모든 형제 중에서 바로 다음에 오는 B만 선택 ( 바로 뒤에 B가 없으면 적용 안됨 )
  • 의사 클래스 / 요소
    • 의사 클래스 ( 선택하고자 하는 html 요소의 특정한 상태를 뽑는 것 )
      • A : B {} 형식
      • A 가 B 상태가 되면서 CSS가 적용됨
    • 의사 요소 ( html 부분의 특정 부분만 선택 )
      • A : : B {} 형식
      • A 다음에 B를 적용한다.

클래스 와 아이디의 차이?

아이디 -> 하나의 문서에 1번만 사용. 여러 번 사용해도 동작하지만, 단일만 사용하는거를 추천

클래스 -> 여러개 전용

CSS 적용 우선 순위

  • 중요도 - 사용시 주의

    • ! important

  • 우선 순위

    • 인라인 > id > class , 속성 , 의사 클래스 > 요소, 의사 요소
  • 같은 우선순위에 있을 땐 가장 마지막에 있는 것을 따른다.

CSS 상속

  • 상위 요소가 하위 요소가 물려 받는것

    • 속성 중에는 상속 되는 것 과 되지 않는 것들이 있다.

    • 되는것 -> Text 관련 요소 ( font , color ,text-align)

    • 되지 않는 것 -> Box model 관련 요소 (width, height, margin )

      ​ -> Position 관련 요소

      <style>
    p{
      /* 상속 됨 */
      color:red;
      /* 상속 안됨 */
      border: 1px solid black;
    }
    span{
      border: 1px solid blue;
    }
  </style>
      • inherit 키워드 사용시, 상속이 되지 않는 것도 상속을 시킬 수 있음

  • 상위 요소가 없다면 하위 요소에 css 적용

크기 단위

  • 고정 크기 단위

    • 부모, 기타 에 영향을 받지 않고 항상 일정한 크기를 보여 줌
    • 예시
      • px ( 픽셀 ) , in ( 인치 ) => 운영체제 마다 달라짐 , pt(피티)

  • 가변 크기 단위 ( 훨씬 많이 씀 )

    • 단말기, 부모 등 상황에 영향을 받고 크기가 달라짐

    • 예시

      • %

      • em

        • 바로 위 부모 요소 크기에 대한 배수 단위 

        •     body {
      font-size: 14px;
    }

    div {
      font-size: 1.7em;
    }


>>>
  <p> Hello :) </p>
  <div> Hello :)</div>

        • rem

          • 바로 위, 부모 요소에 대한 상속을 받지 않음

          • 최상위 요소 (html) 의 사이즈를 기준으로 단위를 가짐

          •     html{
      font-size: 20px;
    }
    body {
      font-size: 14px;
    }

    div {
      font-size: 1.7rem;
    }

  • Viewport : 내가 실제로 보고 있는 화면

    • 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정 된다.
    • 예시) vw , vh , vmin, vmax

색상 단위

  • 색상 키워드
    • 직접 글자로 나타냄
  • RGB 색상
    • 16진수로 표현 ex) #00FFFF
  • HSL 색상
    • 거의 사용하지 않음

Box model

  • Normal Flow

    • 모든 요소는 네모(박스모델) 이고, 위에서부터 아래로, 왼쪽에서 부터 오른쪽으로 쌓인다.

  • 하나의 박스는 네 부분 ( 영역 ) 으로 이루어짐

    • content

      • 글이나 이미지 등 요소의 실제 내용

    • padding -> 본인이 껴있는 것 ( 컨텐트와 보더사이의 거리)

      • 테두리 안쪽 내부 여백
      • 요소에 적용된 배경색, 이미지는 padding 까지 적용

    • border : 테두리

      • border-width , border-style , border-color

      • .border{
	border:2px dashed bladk;
}

  • margin -> 요소와 요소 의 거리

  • margin / padding

  • # 십자가 (상하, 좌우 적용)
.margin-2{
    
}
# 나누기 ( 위 적용, 좌 우 적용 아래 적용)
.margin-3{

}
# 시계 방향으로 적용
.margin-4{

}

  • content-box vs border-box

    • 어디까지를 기준으로 볼 것 인지를 정하는 것.

CSS display

  • 모든 요소는 네모(박스모델) 이고, 좌측 상단에 배치.
  • display에 따라 크기와 배치가 달라진다.

display

  • display:block

    • 줄 바꿈이 일어나sms 요소
    • 전체의 가로 폭을 차지
    • 블록 안에 인라인 요소가 들어갈 수 있음
    • 대표적 : div , p , hr, form
    • block 의 기본 너비는 가질 수 있는 너비의 100%
    • 너비를 가질 수 없다면 자동으로 부여되는 margin

  • display:inline

    • 줄바꿈이 일어나지 않는 행의 일부 요소
    • content 너비만큼 가로폭을 차지
    • width , height, margin-top , margin-bottom을 지정할 수 없음
      • text 로 생각을 하면 됨
    • 상하 여백은 line - height 로 지정한다.
    • 대표적 : span, a ,img
    • inline 의 기본 너비는 컨텐츠 영역 만큼
    • display : inline - block
      • block 과 inline 레벨 요소의 특징을 모두 가짐
      • inline 처럼 한줄 표시 가능 width, height, margin 속성 모두 지정 가능
    • display : none
      • 해당 요소를 화면에 표시하지 않고, 공간조차 부여되지 않음
      • 이와 비슷한 visibility : hidden 은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않는다.
      • visibility : hidden 과 display : none 의 차이 공간이 부여 되는가? 안되는가?

CSS Position

  • 어떻게 두는가?

  • static : 모든 태그의 기본값

    • 일반적인 요소의 배치 순서에 따름 ( 좌측 상단)
    • 부모 요소 내에서 배치될 때, 부모 요소의 위치를 기준으로 배치

  • 아래는 좌표 프로퍼티 (top , bottom , left , right) 를 사용하여 이동 가능

    • relative : 상대 위치
      • 자기 자신이 static 위치를 기준으로 이동 ( 기존 위치를 기준으로 이동 )
      • 레이아웃에서 요소가 차지하는 공간 static 일 때와 같음
    • absolute : 절대 위치
      • 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
      • static 이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동
    • fixed : 고정 위치
      • 요소를 문서 흐름에서 제거 후 , 레이 아웃에서 공간을 차지 하지 않음
      • 부모요소 관계 없이 viewport 를 기준으로 이동
        • 스크롤 시에도 항상 같은 위치
profile
이종현
개발 일기
이전 포스트

0128_TIL

다음 포스트

0208_TIL

0개의 댓글