[TIL : 3] HTML CSS 입문

jabae·2021년 10월 8일
1

TIL

목록 보기
3/44

👩‍💻 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크기를 기준으로 paddingborder 값에 영향을 받지 않고 원하는 대로 설정할 수 있다.
    • 사용 예시: box-sizing:border-box

📚 그 외

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

2개의 댓글

comment-user-thumbnail
2021년 10월 9일

jabae님 화이팅^ㅡ^/

답글 달기
comment-user-thumbnail
2022년 8월 17일

퍼가요~❤️

답글 달기