[TIL] 엘리스 SW 엔지니어트랙 2기

IT/엘리스SW

[TIL] 엘리스 SW 엔지니어트랙 2기 - html, css (Week1,Day3)

시작은코딩 2022. 4. 6. 21:49

728x90

엘리스 SW엔지니어 트랙 2기 DAY_3

📝 목차

시작전 뻘소리
반찬타임
- html>(head+body)
- h2+(ol>(li>a)*3)
- 태그 사이에서 바로 아랫줄, 윗줄로 가는 법
CSS 구분자 띄어쓰기 헷갈리지 않기
미디어쿼리 (feat. transition)
Flex (아마 열심히 정리할 계획을 가지고 있음)

🎙 시작전 뻘소리

어제 1일,2일차를 같이 썼다고 치고, 오늘은 3일차다. ~~사실 오늘 3일차가 맞고 어제도 2일차쓴건데, 1일차는 쓸까말까 고민하다 지나간거라 생각하자~~
CSS 이거이거 은근, 은근 아니고 매우 까다로운 친구네
이고잉님의 실시간 강의는 매우 재미있다. 뭔가 뭐랄까, 유튜브 강의처럼 조곤조곤한데 소소한 것도 소소하지 않다고 해주며 항상 기운을 불어넣어준달까.. 오늘은 갑자기 아이디어가 떠올라서 새벽4시까지 코딩하고 수업을 왔다고 하셨는데, 그런걸 보며 힘들겠다라는 생각보다 멋지다라는 생각이 먼저 드네. 그래서 내가 코딩 배우려는 거지 🔥
또 그런말을 해주셨다. 내가 뭘 만들지 못하는건 내가 배움이 부족해서야 라는 오해. 를 갖고 있다고. 지금 이틀 배운 html, css로도 웹페이지 만들 수 있고 하니까, 미루지 말라는 말. 배운 걸 충분히 활용해서 웹페이지, 포트폴리오 사이트 같은거 만들어!
이고잉님의 라이브강의가 끝나면 바로 엘리스의 다른 코치분이 심화된 강의를 해주는데, 되게 앳된 목소리인데 아는 게 가득해보임 . 나도 누구한테 설명할 수 있을정도로 잘 알고 싶다 !

🍫반찬타임

ㅋㅋ 이고잉님은 꿀팁을 전달해주는걸 반찬준다고 표현하는데, 아주 띠용😲 쓰러운 기능들을 알려준다. 나중에 반찬들 모아서 글 하나로 적어둬도 되겠다 ><

1. html>(head+body)

html>(head+body) 라고 적고 Tab을 누르면?

<html>
<head></head>
<body>
  
</body>
</html

코드가 바로나옴 👀 기가막힌 기능..

**2. h2+(ol>(li>a)*3)**

h2+(ol>(li>a)*3) 라 적고 Tab을 누르면?

<h2></h2>
<ol>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ol>

이게 바로 작성된다고..? 진짜 어메이징 언빌리버블 ,,

3. 태그 사이에서 바로 아랫줄, 윗줄로 가는 법

아랫줄로 가는건 커맨드+엔터

윗줄로 가는 건 커맨드+쉬프트+엔터

이건 해보면 안다.

내 커서가 저기 있는데 아래 한 줄을 추가해야하려면 키 옆으로 여러번 가서 엔터쳐야되는데 그런걸 없애버림

진짜 반찬 인정입니다요

✅ CSS 선택자(selector) 띄어쓰기 헷갈리지 않기

ex) p.abc vs p .abc

p 태그의 클래스인지, p 태그 안에 있는 다른 태그의 클래스인지

띄어쓰기 하나의 중요성이다.

<p class=“abc”>hello world</p>

<p><a class=“abc”>hello world</a></p>

이런 차이인 것!

📱 미디어쿼리

반응형 웹 할 때 나오는 미디어쿼리

깊게 배우지는 않았지만 가볍게라도 배웠다.

<meta name="viewport" content="width=device-width, initial-scale=1">

사용전에는 위의 메타 태그를 html에 꼭 넣어줘야함!

그리고 css에서 원하는 방식으로 꾸며주면 되는데,

.map {
  width: 200px;
  height: 200px;
  background-color: red;
}

@media (min-width:360px) and (max-width: 720px) {
  .map{  
    background-color : blue;
	transition : background-color 1.5s;
  }

map 클래스는 기본적으로 너비 200px, 높이 200px 배경색 빨강을 갖고 있으나

미디어쿼리를 활용하여 최소 360px ~ 최대 720px 사이의 화면에서는 배경색이 파랑색으로,

그 파랑색도 트랜지션을 사용하여 1.5초동안 부드럽게 변화하게 보여준다.

💰 Flex (그 플렉스아님)

Flex의 개념이 제일 어렵다.

다시 정리할거라 Flex라는 개념이 있다 ~정도로만 적어두자.

CSS Flex(Flexible Box) 완벽 가이드

많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F

heropy.blog

오늘 읽고 자야겠다

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

요 아래는 flex를 이해하기 용이하게 개구리가 수련잎에 올라가도록 코드를 작성하는 거로 만들어뒀는데, 매우 도움됨 !ㅋㅋ

24탄중 17탄 깨는중.. 쉽고 재밌게 만들었다. 멋있어