[TIL : 3] HTML CSS 입문

👩‍💻 Achievement Goals : HTML

• HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.

  not now

• HTML이 Markup language라는 것을 이해할 수 있다.

  • "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.

• HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.

  Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.

  • Opening tag : <div> ~~~
  • closing tag : ~~~ </div>
  • self-closing tag : <img src="~"> <input type = "~">

• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.

  yes

• div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.

  • div : 한 줄 차지
  • span : contents의 크기만큼 차지

• ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.

  • ul : (unordered list)
  • ol : (ordered list) 넘버링이 되어 나온다! :)
  • li : (*ul, ol을 사용 후)list의 항목 나열!

• input type을 설정하여 다양한 종류의 input을 활용할 수 있다.

  • <input type="text" ~> : 글자를 사용할 수 있다.
  • <input type="checkbox" ~>: 중복하여 체크할 수 있다.
  • <input type="radio" name="그룹" ~>: 그룹으로 묶어 하나만 선택하게 만든다.

• 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.

  yes

• id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) + HTML 문서를 작성할 수 있다.

  • id : (이름표) # 선택 | 한 문서에 하나의 요소 | 특정 요소에 이름
  • class: (반) . 선택 | 동일한 값 요소가 많을 수 있음 | 스타일 분류에 사용

• HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.

  의미 있는 tag를 쓰자!

👩‍💻 Achievement Goals : CSS

• CSS의 사용목적을 이해할 수 있다.

  style

• CSS의 기본 문법과 구조를 이해할 수 있다.

  yes

• CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.

  • Inline style sheet : <a style='color: red;'></a>
  • Internal style sheet : <style> body{wirdth:300px;} </style>
  • Linking style sheet : <link rel='stylesheet' href='css이름.css'>

• 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.

  관심사 분리 때문이다.

• id 및 class와 관련된 selector 규칙을 이해할 수 있다.

  yes

• CSS를 이용해 텍스트를 꾸밀 수 있다

  • color : hex(16진법) 혹은 주요색상
  • 글꼴 : "글꼴1", "글꼴2", "글꼴3" -> (fallback) 지원하지 않은 형식일 경우 오늘쪽 글꼴로 넘어간다. font-weight 굵기 font-decoration 밑줄 font-spacing 자간 font-height 행간 font-align 정렬 등등

• CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.

  • 절대단위, 상대단위가 있다. (반응형은 상대단위이다.)

• 각 단위가 적합한 경우를 구분할 수 있다.

  yes

• CSS 박스 모델을 이해할 수 있다

  • block box : 줄바꿈o <h1> <p> <div> <- 너비 100%
  • inline box : 줄바꿈x <span> <-(width, height 속성 적용x) 글자만큼!
  • inline-block box : 줄바꿈x <- 글자만큼!

• box model

  yes

• width, height

  yes

• margin, padding, border

  (바깥) -> margin -> border -> padding -> content

• 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.

  • content-box : content 영역을 기준으로 +padding +border크기를 정한다. (최종 크기가 넘어갈 수 있다!)
  • border-box : margin을 제외하고 border크기를 기준으로 padding과border 값에 영향을 받지 않고 원하는 대로 설정할 수 있다.
  • 사용 예시: box-sizing:border-box

📚 그 외

• 계산기를 만들다가 숫자 + operator + 숫자 + operator + 숫자 ... 에서 막혔다! 조금만 더 하면 할 수 있을 것 같다... 내일 힘 내 보자 😛
• CSS로 계산기를 조금 더 예쁘게 꾸며보자...!
• HTML, CSS, JavaScript를 함께 공부하려니 굉장히 재밌다! 재밌으면서 어렵다... 그치만 바로바로 나오는 게 신기하기도 하고!