[패스트캠퍼스] 프론트엔드 부트캠프 HTML/CSS 수업 1주차 후기✨(2주차)

 

안녕하세요? 벌써 교육 2주차가 끝나고 3주차가 시작되었다.

 

이번 교육에 임하면서 다짐했던건... 틀려도 괜찮으니까 질문에 답하고 보기!

그리고 수준 낮아보이더라도 궁금한 것은 꼭 질문하기! 였다.

 

괜히 아는 척하고 넘어갔다가 나중에 프로젝트 진행할 때 꼭 기초 지식이 발목을 잡는 일이 발생하게 되어서..

기초를 탄탄히 하기 위해서는 질의응답을 통해서 진짜 내가 이걸 아는지 확인하는게 필요하기 때문이다.

 

지난 주부터 HTML/CSS 강의가 진행되고 있다.

git과는 다르게 HTML/CSS는 어느 정도 기초 지식이 있다는 것을 가정하고 진행되었다.

 

웹 퍼블리셔 부트캠프를 이미 들었던터라.. 실시간 수업에 집중하지 못할까봐 좀 걱정이었다.

근데 강사님 질문에 답하다보니까.... 음... 남은 한주간도 집중 빡세게 해야겠다 ^__^

그동안 내가 얼마나 많은 것들을 깊게 안다루고 아는 척하면서 쓰루했는지 보이는 시간이었다.

 

아 그리고 CSS flex를 자세하게 다뤄주셔서 너무 좋았다!

부트캠프 들을 때는 강사님이 flex나 grid는 나중에 따로 공부하면 된다고 display : float 만 가르쳐주셔서...(ㅂㄷ) 혼자서 웹페이지 클론코딩하면서 flex와 grid가 등장할 때마다 고역이었는데.. (유튜브 찾아봐도 이해가 안갔다.)  속성 하나하나를 다뤄주시면서 실습과 함께 강의를 진행해주셔서 그동안 머릿속에 흩어져있던 개념들이 정리가 되었다!

오늘은 grid 배우기로 했는데 그 많은 내용을 어떻게 설명해주실지 벌써 두근쓰...

 

오늘 포스팅에서는 한주 동안 배웠던 내용을 적으면서 다시 리마인드 하려고 한다!

양이 좀 많으니 잘 따라와주세유..! (내 자신아)😁

---

🗒️ 221220 HTML/CSS 수업 Remind

• href : hypertext reference. a 태그의 속성으로, 어느 페이지로 이동할 것인지를 작성
• lang, id, class, tabindex, title : 전역 속성 (body에도 해당 속성 부여 가능)
• tabindex : 일종의 번호. 탭 키를 눌렀을 때 번호 순서대로 포커스를 준다. 음수를 주면 해당 탭에는 포커스를 주지 않는다.
• contenteditable : 해당 내용을 수정 가능. 해당 속성이 부여된 요소에 내용을 작성하면 기본적으로 해당 요소 안에 내용 한줄마다 div가 하나씩 추가 생성된다.
• data-... : html 문서 내에 해당 데이터를 저장할 수 있음 ➡️ 주로 javascript에서 해당 속성을 가져다가 사용

 

• position, float 속성을 가진 요소는 자동으로 display : block 처리된다.
• 자식요소로 상속되는 속성 : 글꼴 + 글자와 관련된 속성
  • 글꼴 속성(5개) : font-size, font-weight, font-family, line-height
  • 문자 속성 : text-align, color, white-space, word-break...
• word-break
  • 영어는 기본적으로 띄어쓰기 단위로 단어 구분
  • 한글은 기본적으로 글자 하나하나로 구분. 띄어쓰기 단위로 구분하려면 word-break:keep-all로 지정해줘야 함.
• 글씨체 종류 : 고딕체(sans-serif), 바탕체(serif), 필기체(cursive), 고정너비체(monospace), fantasy
• 저장소에서 직접 폰트를 불러오는 것보다 웹 폰트를 사용하는 것이 페이지의 경량화와 처리 속도 상승을 높이는 것에 도움을 준다.
• inherit : 부모의 속성을 강제 상속한다.

 

✅ 각 속성의 기본값

속성명	기본값
width	auto (block : 최대한 늘어나려고 함, inline : 최대한 줄어들려고 함)
height	auto (최대한 줄어들려고 함)
position	static
white-space (줄바꿈)	normal
font-size	16px
border-color	inherit (자신의 글 색상을 상속받음)
border	medium none inherit
font-weight	normal, 400
background-color	transparent
background-repeat	repeat
background-position	0% 0%
background-size	auto (이미지의 실제 크기)
background-attachment	scroll (이미지가 요소를 따라서 같이 스크롤)
z-index	auto (부모와 동일한 쌓임 정도)

 

 

---

🗒️ 221223 HTML/CSS 수업 Remind

CSS Flex

• flex 속성을 부여하는 요소 : Flex Container
• flex 속성 아래에 있는 요소들 : Flex Items

 

Container 속성

• container는 items를 수평 정렬한다.
• inline-flex하면 container를 글자 취급한다.
• inline-flex에서 줄바꿈은 띄어쓰기 처리되므로 주의!
• flex는 1차원 레이아웃, grid는 2차원 레이아웃
• flex-direction : column의 필요성 ➡️ html 구조를 건들지 않고 item의 정렬 순서를 바꿀 수 있다.
• flex-flow  : flex-direction flex-wrap
  • wrap : 줄바꿈을 지정
• justify-content : 주 축의 정렬 방법을 설정 ➡️ 남는 공간을 어떻게 활용할 것인가를 정의함
• align-items : 교차 축의 한 줄 정렬 방법
• align-content : 교차 축의 정렬 방법
  • 기본값 : stretch ➡️ item은 높이를 최대한 늘려서 container의 높이를 따라감. content 속성은 줄이 여러 줄일 때 유효함.

 

Item 속성

• flex item은 너비가 최대한 줄어들게 된다. ➡️ 반드시 너비/높이 지정 필요!
• flex-grow : 증가 너비 비율
• flex-shrink : 감소 너비 비율 (크기가 줄어들 수 있음을 전제함)
• flex-basis : 기본 너비를 자신이 포함하고 있는 내용 및 너비를 제외한 나머지 영역을 기준으로 비율을 가짐
• flex 단축 속성을 사용했을 때, basis의 값을 적지 않으면 flex-basis의 기본값은 0이 된다.
• align-self : align-items를 자기 자신에게 적용 

 

flex 속성 기본값

속성명	기본값
flex-direction	row
flex-wrap	nowrap (줄바꿈 없음)
justify-content	flex-start
align-content	stretch
align-items	stretch
order	0
flex-grow	0
flex-shrink	1 (flex container 너비에 따라 감소 비율 동일하게 적용)
flex-basis	auto (요소의 content 너비)

 

Position

• fixed : viewport 기준으로 고정
• 조상 요소에 transform, perspective, filter 중 하나가 있다면 그 조상 요소를 컨테이닝 블록으로 삼는다.

 

말줄임표 처리

• white-space : nowrap;
• overflow : hidden;
• text-overflow : ellipsis;
  ✅ 세 속성을 함께 써야 한다!

 

그 외

• width 속성에 min-content를 지정하면 content 크기만큼만 너비를 가진다.
• background에 그라데이션을 지정하려면 background-image : gradient()를 사용한다. (-image 속성임을 기억!)
• background-size : contain (빈 공간 O) / cover (이미지가 요소 전체를 덮음)
• 배경이미지 대체 텍스트 숨김 처리 : text-indent : -9999px;
• margin collapse : 마진 중복
  • 형제 블록 요소의 상하 마진 중복 ➡️ 더 큰 마진값만 적용 (좌우는 중복 발생 X)
  • 부모 자식 블록 요소의 상상 혹은 하하 마진 중복 ➡️ 부모에 margin 처리됨
  • 마진 중복은 문제가 아닌 우회하거나 활용 가능한 현상이다.
  • 마진 중복은 블록 요소에만 발생한다.

 

---

position, float 속성을 가진 요소들은 자동으로 block 처리된다.

해당 속성 걸어놓고 display:block 처리하는 사람들은 제대로 공부 안한 사람들이다. 라고 하셨는데 앗.. 혹시 나..? ^,^

자동으로 block 처리 되는지 몰랐던 사람 1인...🙄 이제 알았으니 앞으로 주의해서 작성해야겠다!

 

지금은 HTML,CSS만 사용해서 원하는 페이지를 클론코딩하는 과제를 하는 중이다.

JS를 사용하지 않고 하려니 CSS에서 만질 부분이 많아져서 좀 짜잉난다...ㅋㅋㅋ

하지만 JS 대신 CSS로 구현할 수 있는 부분들을 보고 재구축하는 과정 속에서 어떻게 하면 더 효율적으로 코드를 짤 수 있을지 고민하게 된다! 또 그동안 잘 사용하지 않았던 CSS -webkit- 속성을 사용할 수밖에 없는 상황이 있어서 그 부분을 공부하게 되는 계기가 되었다.

 

클론코딩하면서 좀 어려웠던 부분은 조만간 포스팅으로 작성하면서 다시 정리해야겠다!

일단 저는 다시 과제를 하러 갑니다.. 총총총

 

여러분 이번 한 주도 화이팅입니다!