오늘은 특강 DAY였다🤩
금요일이라 그런지 일어나는데 쫌 피곤했는데😴
특강이라 마음 편하게 시작했지만 더 집중한 하루를 보냈다ㅋㅋㅋ🤯
오늘의 꿀팁
💡 이력서에서 '입사 후 포부'는 어떻게 작성할까?
"내 역량(기술, 경험)을 근거로 회사의 어떤 부분에 기여할 수 있다"
그래서 근거가 될 수 있는 포폴을 잘 만들어야 한다!
📌 멋사 선배 특강
by. 3기 이지형님
같이 해서 즐거웠던, 같이 해서 성장한
아쉽지 않게 멋사 수료할 수 있는 꿀팁💡
- 복습 꾸준히 해서 커리큘럼 소화하기
- 수업 내용에 초점
- 블로그 작성 - 이력서 미리미리 준비하기
- 아웃라인 잡아놓기
- 계속해서 많이 쓰고 피드백 받고 수정하는게 좋다 - JS 공부
- 책 읽기
- 기술을 자꾸 써보려는/구현해보려는 노력이 중요하다 - 스터디 참여하기
- 내가 소화할 수 있는 양을 생각해서 스터디 참여하기
- 단기적인 스터디 추천 - 토이프로젝트로 부딪히면서 성장해보기
- 미완성의 두려움 느끼지 말기
- 프로젝트 할 때 README 잘쓰기 - 기술 블로그 써보기
- 고민의 흔적
- 트러블슈팅에 대한 고민과 해결이 있으면 좋다
- 많으면 많을수록 좋다
🎨 CSS 특강_1
by. 빔 캠프 이종찬님
작업 순서
STEP 1. 큰 레이아웃부터 잡고 시작하기
전체적인 시각적 덩어리가 어떻게 구성되어 있는지?
STEP 2. 최소한의 마크업으로 시작하기
서두르지 않는다!
STEP 3. 마크업 추가하기
STEP 4. 준 적 없는데 들어가있는 시각적인 스타일 없애주기
내가 지정한 스타일이 아니니까 작업하는데 방해할 수 있기 때문
기본으로 세팅되어있는 스타일이 존재한다
-> initial value(프로퍼티에 설정되어있는 것) 이야기하는 것 아님🙅♀️
-> 사용자 에이전트 스타일시트: 브라우저 스타일시트
ex) h1에 기본으로 세팅되어 있는 스타일: 제목이니까 제목처럼 보이는 스타일
브라우저가 각각의 요소에 지정해놓은 스타일이 있다
브라우저마다 다른 스타일을 지정해준다
ex) margin: initial; -> 초기화
💡 공부할 때는 reset css 말고 필요한 부분에 하나씩 주는 것을 추천
웹마다 다르고, 계속해서 업데이트 되고 있기 때문에 변화를 느껴야 하니까
재료에 대한 이해가 필수!
STEP 5. 스타일 주기
-
용어는 처음에 잘 알고 가는게 좋다
div: type selector
background-color: property
orange: value
style,class: attribute -
div 너비는
width라는 property로 컨트롤한다
width가 기본으로 설정되어 있다 ->width: auto; -
높이는 일차적으로는 지정 안하는 것이 좋다
콘텐츠에 따라 알아서 높이가 정해질 수 있게끔 기본적으로height: auto;가 좋다
- property가 없을 때 기본으로 세팅이 되어 있는 value가 존재한다는 것을 인지하는 것이 중요하다
initial value(초기값, 디폴트 값)가 존재한다
ex)background-color: transparent;,text-align: start;
모든 property는 지정이 안되어있을 때 지정된 값이 존재하고 있다!!
- Q.
width: auto;는 어떤 의미? 브라우저가 어떻게 계산해낼까?
A. 직계 부모 요소의 콘텐츠 영역: containing block만큼 너비를 갖는다
(요소의 컨테이닝 블록이 언제나 직계 부모 요소의 콘텐츠 영역인 것은 아님
ex. position:absolute의 컨테이닝 블록)
-
Q.
width: auto와width: 100%는 뭐가 다른가?
A.width: auto는 margin, padding, border가 고려된 상태에서 부모가 제공하는 콘텐츠 영역만큼 가득 채운다
width: 100%는 부모가 제공해주는 콘텐츠 영역을 가져오지만(상속 아님!!) margin, padding, border가 추가된다 -
Q. div는 왜 왼쪽에 있지?
A.direction: ltr;
우리나라는 왼쪽에서 오른쪽, 아랍은 오른쪽에서 왼쪽으로 글을 쓰는 문화권
-> initial value는 상황에 따라 달라질 수 있다 -
Q. div는 왜 아래로 떨어지지?
A. Block-level elements이기 때문이다
start tag :<div>
end tag :</div>
element :<div></div> -
Block-level elements의 오른쪽 여백은 Block-level elements가 사용 가능한 공간
margin: 0 auto;를 주면 사용 가능한 공간을 자동으로 margin으로 취한다 -
margin: 0 auto;는 Block-level elements를 가운데 정렬한다 -
text-align: center;는 Inline elements(텍스트, 이미지 등)를 가운데 정렬한다
inline align이라고 볼 수 있다
Q.h1,p는 가운데 정렬이 된 적 없다?
A.h1,p안의 텍스트가 가운데 정렬된 것이다
->box-shadow: inset 0 0 10px red로 Block-level elements가 공간을 어떻게 차지하고 있는지 알 수 있다
(width/height 지정 없이border,box-sizing: border-box;를 쓰면 크기가 커진다)
- 상속 inheritance
상속이 지원되는 property가 있다
colortext-align
ex)padding: inherit;
부모의 padding property의 value를 상속받겠다
상속받는 요소에 새로운 값을 줘서 상속 안받을 수 있다
-
<html>: root element
class : 명찰 개념
여러 개 가질 수 있다
-> 스타일이 반복되고 일정 부분만 다르다면 class를 더 주는게 좋다
pseudo class는 부차적으로 사용하기 -
selector
- type selector
구체적인 스타일을 줄 때는 type selector를 쓰지 않는다
타입 셀릭터는 보통 초기화할 때 쓴다
- class selector
div.section: .section을 가진 div
.section
-> 상황에 따라 사용한다
-*: universal selector
- id selector
#wow
- descendant selector
.header h1: 조상이 .header인 h1
공백: descendant combinator
1) 범위를 줘서 섬세하게 선택한다
2) 정리차원에서 적기도 한다 '이 요소의 css구나' -
Q. margin 병합은 언제 일어나지?
A. 1) Block-level elements끼리 2) 인접해있는 상하단 margin -
이미지 사용할 때
정보성이라면<img>마크업
데코레이션에 지나지 않으면background-image
- CSS(Cascading Style Sheet)
캐스케이드 : 계단식, 종속적, 폭포식
- CSS Specificity
selector가 얼마나 구체적으로 작성되어있는지에 따라 우선순위가 정해진다
브라우저가 구체적인 것을 더 가치 있는 정보라고 판단하기 때문
구체성 - 금, 은, 동 메달로 생각
윤(0,0,1) < .말랑(0,1,0) < 윤.말랑(0,1,1) < 서울사는 윤.말랑(0,1,2) < 윤.말랑.yoonmallang(0,2,1) = 윤.말랑.말랑(0,2,1) = 윤.말랑:hover(0,2,1) < body 윤.말랑.yoonmallang(0,2,2) < #대학생 (1,0,0) < 인라인 스타일 < !important
!important : 노래방 우선예약 같은 애, 신
사용하지 말기
책 추천
<해커를 위한 디자인 레슨>
<CSS 완벽 가이드>
CSS를 잘 안다고 생각했는데.. 기본적인 것을 놓치고 있었던 것 같다 튱격
오늘 진짜 탄탄하게 다진 느낌?!?! 그리고 CSS 너무 재밌다..!ㅎㅎ
