TIL - 21.06.18 👨‍💻 HTML/CSS

성훈·2021년 6월 18일

CSS TIL html

TIL

목록 보기

5/59

TIL - 21.06.18 👨‍💻

오늘은 HTML / CSS 전반에 대해 배웠다.
복습한 거에 가깝긴 한데.. 모호했던 용어들 다시 한번 잡고 가자.

HTML

태그 명칭

<a src="https://velog.in/@planethoon">Content</a>
// a - 태그, 앞 부분은 opening tag, 뒷 부분은 closing tag
// 가끔 클로징 태그 없는게(br, img 등) 있는데 엄격모드에서 작동안하니 <br /> 이런 식으로 닫아주자.
// src - attribute name, 블로그 주소자리 - attribute value.

pre 태그

안에 있는 값을 이렇게 가로 길이가 고정시키고 HTML소스코드로 쓰여진 것 처럼 보여지게 해주는 코드이다.
display 타입은 block이다.

CSS

태그 명칭

/*body는 selector(선택자)*/
body {
  /*이 아래는 선언(declaration); 배경색은 검은색이라고 선언한 것.*/
  background-color:black;
  color:white;
  /*background-color, color는 property*/
  /*black, white는 value*/
}

알아둘 점
CSS의 class는 한 요소에 두개 이상의 클래스 부여가능하다.

<head>
  <style>
    .style {
      background-color: whitemint;
    }
    
    .layout {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="style layout">Planet = Sung</div>
  // 클래스 구분은 스페이스 한번으로 한다.
</body>

CSS 단위

절대 단위 - pt, px**
상대 단위 - rem, em, %, vw, vh ...

주로 사용하는 것은
rem인데, 사용하는 브라우저 root값에 따라 크기가 달라진다. // 2rem 이면 루트 폰트 값의 두배크기.
em은 부모 인자의 영향을 받는다.

vw, vh는 각각 viewpoint width, viewpoint height인데,
컨텐츠가 화면에 가득차는 웹페이지가 100vw, 100vh를 이용한 웹페이지 이다.
ex) https://www.tesla.com/ko_kr

번외로 rem 값은 음수도 value로 사용할 수 있는데 이 경우 다른 태그들과 겹쳐질 수 있다.

알아둘만한 CSS property

/*폰트 굵기*/
font-weight: 500; 

/*밑줄, 가로줄*/
text-decoration: underline overline none;

/*자간 조정*/
/*default value = 0*/
letter-spacing: 0px; 

/*행간 조정*/
/*chrome default value = 24px*/
line-weight: 1px;

GOOD 😉

한 주를 무사히, 기분 좋게 마쳤다!
HTML과 CSS를 복습하는 시간을 가졌다.
새로운 태그들과 선택자들을 배우고 새로운 방식의 사용법을 알아봤다.

BAD 😥

HTML과 CSS를 조금 공부했었는데, 겉핥기로 엄청 조금 공부해놓곤 다 아는거마냥 설렁설렁 공부한 점이 부끄럽다.
어제 하기로 했던 객체공부가 밀렸다.

TO DO 🔥

내일은 객체 꼭 공부하자!
블로깅 방향 다시 한번 고민해보기.

Retrospect 🧐

이건 코드스테이츠 자기 진단에도 쓴 글이지만 여기서도 써 놓는다.
난 늘 생각하던거지만 아예 모르는걸 배울때와 비교해서 겉핥기식으로라도 알고 있는 것을 배울때와 집중력 차이가 매우 큰 것 같다.
자만하기 쉬운 타입이랄까, 오늘 다시 한번 인지했을때 ㅈ모르는 주제에 안다고 착각하는게 부끄러웠다.

블로깅 방향이 매우 고민된다.
TIL을 이렇게 써가면서 하단에 추가한 찾아본 것을 짧은 글로 따로 남길지,
아니면 오늘처럼 써 나가는게 좋을지.

포스팅하다가 잠시 멈추고 생각해봤는데 TIL 따로 쓰고 고심해서 찾으며 따로 정리해야겠다.
TIL은 오늘 배운거 복습 + 일기 겸 하루 반성을 목적으로 포스팅하고,
짧은 기술 포스팅은 내가 다시 찾고, 공부해 나가며 보완해 나갈 점은 수정해 다듬어 나가는 것으로.

그리고 오늘 동기부여 세션에서 커리어 코치님이 개발자가 되고 싶은 이유를 포스팅해보라고 이야기 해주셨다.
내가 개발자가 되고 싶었던건 이전 포스팅했듯,
유저들과 소통하며 무엇이 될지 모르는 어떤 것을 완성해 나가면서, 작품이 완성도와 동반된 성취감을 즐기고 싶어서 인데..

계속 생각해 나가며 동기를 만들어 나가야겠다.

계속 공부하며 생각할 거리가 생기는 직업이라.
정말 낭만 넘치는 직업이다.