TIL 210526

7318 단어 TILCSSCSS

오늘 한 일

  • 저번에 만든 웹페이지에 CSS 기능을 추가함
  • 반응형 유닛에 대한 강의 시청

공부한 내용

반응형 유닛

px의 문제점

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 1000px;
      font-size: 24px;
      background-color: mistyrose;
    }
  </style>
</head>
<body>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto aperiam aliquid cum vitae quia veniam, officiis alias qui eligendi harum nesciunt ducimus cupiditate, autem sint laboriosam distinctio debitis amet neque.</div>
</body>
</html>

  • 컨테이너의 사이즈가 변경되어도 컨텐츠가 그대로 고정 된 값으로 유지된다.
  • font-size를 px로 쓰게 되면 사용자가 브라우저에서 폰트 설정을 바꿔도 적용되지 않음

해결방안

div{
	width: 80%;
	font-size: 24px;
	background-color: burlywood;
}

→ 상대적인 유닛인 %을 이용해 부모 요소의 값을 바꾸면 컨텐츠가 유동적으로 변함

relation length units

em, rem, vw, vh, % 을 배웠는 데 아직 개념을 확실하게 구분하지는 못해서 복습이 필요하다.

해야 할 것

  • 오늘 만든 웹페이지 반응형으로 수정하기
  • CSS 강의 듣고 정리한 내용 블로그에 올리기
  • css 플렉스박스에 대해 정리한 블로그 글 읽기
  • Git에 대해 공부하기 → 제발 이번주 안으로 배워.....
  • 영타 연습🐢 → 속도 200 이상으로 올리기

css한테 뚜까맞느라 cs50 강의는 결국 후순위로 밀려났다. 원래 오늘 계획은 블로그에 css 정리한 내용 올리려고 했는데 css로 삽질하는 바람에 모든 게 꼬여버렸다.

엘리님의 소스코드를 참고하면서 생활코딩 강의때 만들었던 페이지를 좀 더 보기 좋게 만들었다.

네비게이션 바는 내가 추가 했는데 레퍼런스와 구글을 뒤적거리면서 리스트들을 수평으로 배치하고 justify-content: space-around;를 이용해서 적당한 간격으로 떨어 뜨려 놓았다.

그리고 제일 애먹었던게

텍스트 길이 때문에 박스들의 크기가 제멋대로 였는데 width와 관련된 값을 이것저것 대입하다보니 width: fit-content; 로 해결할 수 있게 되었다. 근데 구글에 검색해도 왜 저걸로 해결됐는지 비슷한 사례를 못찾겠어서 일단 해결한 것에 의의를 뒀다...

em rem 등을 이용한 반응형 웹으로 수정하는 작업은 개념 공부를 다시 하고 하는 걸로...

그리고 html 폼 기능을 실습 해보고 싶어서 겁도 없이 네이버 로그인 화면을 따라했는데

진짜 어디서부터 잘못된 지 모르겠다🤷🏻

우측 상단에 있는 언어 선택 폼은 그래도 맞게 구현한 거 같은데 네이버 로그 배치부터 로그인 폼까지 정말 답도 없다. 마크업부터 잘못됐는지 아님 css를 더럽게 못 해서 원하는 모양으로 배치를 못 하는 건지...

그래서 네이버 소스코드를 슬쩍 봤는데 일단 헤더부터 꼬인 거 같아서 일단은 조용히 묻어 두기로 했다. 마크업 하는 법부터 다시 복습하고 나중에 타임캡슐처럼 열어봐야겠다...

P.1912 연속합
알고리즘 문제풀이-카펫

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage