TIL 210223

1. html, css 의 기초에 대해서 학습하였다

2. html 이란? 😼 : HyperText Markup Language

Markup, 구조를 표현하는 언어이다. HTML 구조가 부모가 하나이고, 자식이 여럿인 트리 구조이다. tag들의 집합이라고 볼 수 있다! tag 는 부등호로 묶인 html의 기본 구성 요소이다.

그중 자주 사용되는 html element 는 div 와 span 이 있는데, 아래로 설명 될 수 있다. 👍div와 span 은 둘 다 영역을 설정할 때 사용 된다. 차이점은 두가지가 있다 첫째, div는 줄바꿈이 되지만 span 태그는 바로 옆으로 붙는다. 둘째, div 는 사각형 박스로 구역을 정하지만 span은 문장 단위로 지정 된다.

다른 tag들도 알아보자.

  <!DOCTYPE html> // 이 문서는 html 문서 임을 명시 
   <html> // 시작 태그로, 문서 전체의 틀을 구성
      <head> // body를 설명하는 부분은 head 로 감싸준다
      <title>Page title</title> // 문서의 제목, 브라우저의 탭에 보여짐
   </head>
     <body>  //문서의 내용을 담는 곳
     <input type="text" placeholder="type here"> //text 를 입력받는 창
     <h1>Hello World</h1> // heading 을 의미하며, 크기에 따라 1부터 6까지 있음
      <div>Content here // content division 을 의미하며, 줄 바꿈됨
        <span>Here too!</span> //줄바꿈이 없는 content 컨테이너
      <button>로그인</button> // 로그인하는 버튼
    </div>
  </body>
</html>

3. CSS 란?

스타일링을 담당한다. 단순히 예쁜 것만이 아닌 아래 이유로 사용된다.

  • 적당한 위치에 콘텐츠 배치(레이아웃)
  • 텍스트 강조와 같은 최소한의 타이포그래피
  • 최소한의 접근성 ( ex. 색상 )

CSS 의 기본 문법 구성은 다음과 같다. 셀렉터 { 속성명 선언 : 속성값 ; }

  • 중괄호 앞에 등장하는 태그 이름은 셀렉터(selector) 라고 부른다. 속성과 속성 사이는 반드시 세미콜론으로 구분해야 한다.

4. 기본적인 셀렉터

-id로 이름붙여서 스타일링 적용 / css 에는 # 기호를 이용해 id 를 선택할 수 있다. / 문서내 단 하나의 엘레먼트에만 적용할 수 있는 유일한 이름 -class로 스타일 분류하여 적용 / css 에는 . 기호를 이용해 class 를 선택할 수 있다. / 목적이 동일한 여러 엘리먼트에 적용할 수 있음

5. 텍스트 꾸미기

.box {
 <div> color: #155724; /* 글자 색상 */</div>
  <div> background-color: #d4edda; /* 배경 색상 */</div>
   <div>border-color: #c3e6cb; /* 테두리 색상 */</div>
   <div>font-family: "SF Pro KR", "MalgunGothic"; /* 글꼴 */ : 글꼴은 순서대로 fallback 을 위함임</div>
   <div>font-size: 24px; /* 글자 크기 */</div>
   <div>font-weight /* 글자 굵기* /</div>
   <div>text-decoration / *밑줄, 가로줄 */</div>
  <div> letter-spacing /* 글자 자간 */</div>
  <div> line-height /*글자 행간 */</div>
}

글자 크기 에서 알아야할 단위

  • 절대적이고 확실한 크기로 정하고 싶을 때 : px(픽셀)을 사용하면 된다.
  • 보통의 경우 : rem 사용, 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다
  • 화면 너비, 높이에 따른 상대적인 크기가 중요한 경우 : vw, vh사용 // 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh 를 사용한것임

6. 정렬

가로로 정렬할 경우 : text-align // 유효한 값 : left, right, center, justify(양쪽정렬)

7. 박스모델 : 모든 컨텐츠는 고유한 영역이 있으며, 보통 엘리먼트로 묶이는 콘텐츠가 하나의 박스가 된다.

border(테두리), padding(안쪽 여백), margin(바깥 여백)

Updated: