4일차TIL 210305

1. html css js

  • html : 구조를 위한 언어
  • css : 디자인
  • javascript : 상호작용
  • 관심사 분리가 필요하다 : 서로의 영역에서 최고의 능력 발휘하기!

2. HTML 에서 자주 사용되는 tags

  • <div>
  • <span>
  • <p>
  • <img>
  • <a>
  • <ul><li>
  • <input> 
    <input type="radio" name="choice">
    • 체크박스는 여러개 체크 가능
    • 라디오는 이름설정해서 그 그룹중 하나만 체크가능
  • <textarea> : <input type="text"> 와 비슷하나 textarea는 줄바꿈이 가능하다.
  • <section>

시맨틱태그 = 의미를 가지는 태그 태그가 의미를 가짐으로써 사이트에 대한 정보를 비교적 정확히 제공할 수 있다. 제목 없는 그림

3. CSS

  1. class 와 id
    • 여러개의 .class 를 하나의 엘리먼트에 적용할 수 있다. 공백을 이용해서 class 이름을 분리해주면 된다.
    • class 는 문서내 동일한 값을 갖는 엘리먼트가 많다. 스타일의 분류에 사용된다.
    • #id는 문서내에서 단 하나의 엘리먼트가 유일한 값을 가짐.
<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}
.menu-item {
  text-decoration: underline;
}
2. 크기지정
- 절대적이고 확실한 크기로 정하고 싶을때 : px 사용
- 보통의 경우 : rem 사용 
- 반응형 웹에서 기준점을 만들 때 : 디바이스 크기별로 css 를 달리 적용하기
- 화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우 :vw, vh
3. 기타 스타일링
- 굵기 : `font-weight`
- 밑줄, 가로줄 : `text-decoration`
- 자간 : `letter-spacing`
- 행간 : `liner-height`
- 정렬시 : `text-align : left/right/center/justify`
4. tag마다 block/inline 여부가 다르다.
5. box 모델
- 개발자 도구 - element 에 그림 확인 가능
- 박스크기 측정 기준 : content box / border box
  border box는 패딩을 포함하여 전체 크기를 계산한다
  content box 는 주어진 크기와 패딩 마진을 모두 합쳐서 Css 를 표현한다.

4. 깃헙블로그를 통해 html과 css 와 친해지고 있다.

처음 설정에서 이렇게 하이라이트 주는것 이 너무 흰색과 비슷해서 어떻게 하면 더 특이한 색으로 바꿀수 있을까? 싶어서 겁도없이(?) 레포지토리를 헤매며 드디어 색을 바꾸었다! 색이 변했을때의 쾌감이란. 점점 익숙해지고 html, css 파일을 보는게 처음보다는 편해지고 있다는것을 느낀다. 🙊

Updated: