211105 프론트엔드 스쿨 5일차

수업 내용 (한재현 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. box model - display

• 수평정렬

인라인 요소는 줄바꿈이 되지 않기 때문에 수평정렬이 된다
하지만 width, height, margin 상하값 들이 적용되지 않는다

인라인 요소인 span에게 width, height, margin를 줬다
margin 좌우값만 적용되는 걸 볼 수 있다

인라인 블록은 인라인과 블록의 성질을 다 가지고 있기 때문에 수평 정렬도 되고
width, height, margin도 전부 적용된다

하지만 margin을 빼보면 요소들 사이의 빈 공간이 있다

html에서 span을 줄바꿈해서 적었기 때문이다

<span>인라인블록</span>
<span>인라인블록</span>
<span>인라인블록</span>

컴퓨터는 html의 스페이스 한 칸까지 인식하기 때문에 줄바꿈을 하면 한 칸 띄어져 있다고 본다

해결법

1. 줄바꿈 해제
   컴퓨터가 줄바꿈을 한 칸 띄어져 있는 걸로 인식해서 빈공간이 생기는 거니까 그냥 줄바꿈을 안하는 방법

<span>인라인블록</span><span>인라인블록</span><span>인라인블록</span>

2. body의 font-size: 0
   body의 폰트 사이즈를 0으로 하면 span 사이의 빈공간이 0이 되서 사라진다

폰트 사이즈가 0이니까 다른 글자들도 안보이게 되는데 필요한 애들만 폰트 사이즈를 다시 주면 된다
하지만 이런 방법은 번거롭고 귀찮기 때문에 인라인 블록을 수평정렬할 때 쓰지 않는다

2. position

• normal flow
  

• position 주기
  두번째 블랙 박스에 position: absolute 을 지정했다
  위치값을 지정하지 않아서 static일 때의 위치에 있다
  변화는 세번째 박스에게 생겼다
  normal flow에서 벗어난 두번째 박스를 인식하지 못하고 그 자리에 아무것도 없다고 생각해서 내가 자리 채울게~ 하고 위로 올라간 것이다
  올라갔더니 두번째 박스에 가려서 안보인다
  

• absolute 예시 살펴보기
  네이버 뉴스에서 더보기 버튼의 위치는 왜 position: absolute로 설정했을까?
  
  html 구조는 언론사별 가장 많이 본 뉴스 - 뉴스 컨텐츠 - 더보기 버튼 순이다
  더보기 버튼이 제일 아래에 마크업됐는데 위치는 우상단에 둬야 하니까 position: absolute으로 위치를 조정해준 것이다
  근데 왜 더보기 버튼을 가장 마지막에 마크업했을까?
  스크린 리더기는 html 구조대로 읽기 때문이다
  타이틀을 얘기하고 뉴스 컨텐츠를 얘기해주고 나서 더 보겠냐는 물음이 나와야 흐름상 논리적이다
  이런 목적으로도 position 속성이 사용된다

3. float

float된 요소는 normal flow와 다른 차원에 있어서 형제들과 부모가 float된 요소를 알아보지 못한다
그럼 어떻게 알아보게 할까 (어떻게 float를 해제할까)

• 형제가 알아보는 방법

아래는 normal flow 상태

두번째 검정 박스에게 float: left를 줌
검정 박스가 사라짐

float을 주면 넓이가 사라져서 값을 다시 줘야한다
width: 100%을 넣으니까 다시 나타났다

근데 마지막 핑크 박스는 float된 검정 박스를 인식하지 못하고 있다
검정 박스 자리에 아무것도 없다고 생각해서 자기가 올라갔고 검정 박스에 의해 가려져서 안보이는 상태다

이렇게 자기 형제가 float 됐는지 아닌지도 모르고 엄한 자리로 가는 애들의 기강을 잡는 방법이 clear이다
clear을 줌으로써 같은 형제 내에서 float 요소를 알아보게 한다
이 예시에서는 검정 박스가 float: left로 있으니까 니 형제 left에 있다~하고 clear: left를 준다

앞에 있는 형제가 float: left OR right 인 가변적인 상황이라면 both를 쓰면 된다

• 부모가 자식을 알아보는 방법

1. overflow: hidden을 쓰는 경우
   박스 세개가 다 float:left 일 때
   ul이 자식의 높이를 인식하지 못하고 있다
   
   부모 ul에게 overflow: hidden을 주면 자식의 높이를 인식한다
   

그런데 overflow: hidden을 쓰면 부모의 영역만큼만 보여줘서 자식의 컨텐츠를 잘라버릴 수도 있다
그런 경우에는 display: inline-block을 줘도 해결 되지만 block처럼 라인을 다 차지하지 않기 때문에 넓이값을 다시 줘야 한다


2. clearfix
html에는 존재하지 않고 css에만 존재하는 가상의 요소를 형제로 만든다
after 가상 요소를 부모에게 부여해서 막내 자식을 만든다 (before는 첫 번째 자식)

<ul class=clearfix>
  <li></li>
  <li></li>
  <li></li>
</li>

.clearfix::after {   ✅ .clearfix 와 같은 요소를 유틸리티 클래스라고 부름

    content:'';      ✅ 꼭 있어야 요소가 생성됨

    display: block   ✅ 가상 요소는 inline 속성을 가지고 있어서 block으로 변경해준다

    clear: both      ✅ 가상요소가 다른 형제들을 인식함
}

<가상 요소를 왜 사용할까>
가상 요소를 사용하지 않으면 html에 불필요한 요소들이 생길 수 밖에 없다
필요없는 html을 자제하기 위해 가상 요소를 사용한다

pc화면에서 flex를 지원하지 않는 경우가 있어서 float이 실무에서 쓰인다

4. 실습

• 수평정렬 이용해서 아래와 같은 로그인 ui 만들기

  원본
  
  실습
  

• 실습을 통해 알게 된 내용

  • 누르는 요소에는 button, a 태그 사용한다
  • button은 button을 누름으로써 특정 기능이 발생할 때나 form에서 사용한다
  • a 태그는 다른 페이지로 이동할 때 사용한다 → 네이버의 로그인, 아이디·비밀찾기, 회원가입은 다른 페이지로 이동해서 진행되니까 a 태그로 만들어준다
  • button안에 들어가는 컨텐츠 요소는 기본적으로 수직수평 정렬이 된다
  • button의 type이 없으면 디폴트는 submit
  • div 요소는 의미가 없기 때문에 사용을 자제하자
  • 의미없는 이미지는 background로 처리한다 → naver 로고는 중요하니까 img로 할 수도 있다
  • img 태그에 vertical-align, margin을 통해 위치를 조정할 수 있다
  • img 태그에 ling-hight도 적용된다
  • img 태그도 인라인 요소지만 예외적으로 너비, 높이값을 지정할 수 있다
    
    

• alt와 접근성
  로그인 버튼의 네이버 로고는 접근성 측면에서 alt="naver" 하면 의미있는 이미지가 된다
  하지만 그 아래 아이콘들은 바로 옆 문구들과 정보값이 중복되기 때문에 alt속성이 필요없다
  그렇다고 alt속성을 삭제하면 스크린리더기가 img의 경로를 읽어버린다
  alt속성이 필요하지 않는 경우에는 삭제하지말고 alt=""와 같이 비어두자
  
  
  

5. flex

• flex는 자신의 넓이를 display: block처럼 차지한다
  

• inline-flex는 자식 요소만큼만 차지한다
  

• flex-direction은 축의 방향을 바꾼다
  flex-direction: row;가 기본값이다
  
  flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;
  

• flex는 축(Axis)을 기준으로 정렬된다

• row 기준으로 justify-content 설정하기

  justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;
  
  justify-content: space-evenly;
  

• column 기준으로 justify-content
  justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;
  

• 실습
  아래 그림을 flex로 정리하기
  
  결과물
  

article{  
    background:black;
    width:350px;
    height:300px;
    /* 실습 */
    display: flex;
    justify-content: space-between;
}


.right_side, .center, .left_side{
    height:300px;
    /* 실습 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* 실습 */
.right_side {
    flex-direction: column-reverse;
}

오늘의 TIP

1. css

• 자식의 높이는 변경될 수 있기 때문에 레이아웃을 짤 때 부모의 높이값은 지정하지 않는다
• nth-child은 사용하기 편하지만 자식 요소가 추가되면 차례가 변경되서 곤란하다
  그래서 실무에서는 class를 사용한다
• div같은 블록요소는 자기가 위치한 곳에서 전체 너비를 가지기 때문에 화면을 꽉 채우겠다고 굳이 width: 100% 안해줘도 된다

2. 이호준 강사님의 추천 학습법

1. 시각화하기 : 모르시는 것은 포스트잇에 대제목만 메모해두세요! 나중에 스스로 정리하는 시간을 가지시면 어떨까 합니다.
2. 따라하기 : 예제 파일은 github에 업로드 되고 있는 것 아시죠? 나중에 인쇄해서 직접 타이핑 해보시고, 그래도 이해가 안되시면 직접 손으로도 써보시면 분명 막막했던 것들이 풀리실겁니다!!
3. 정리하기 : 대부분의 질의 응답은 Notion 질의응답에 정리되어 있습니다. Notion에도 정리가 되어 있지만, 좀 더 상세한 내용들은 MDN이나 검색을 통해서 나만에 글로 정리를 한 번 해보시는 것이 좋습니다.

3. 참고 링크
speedcoder - 타자연습
github - 무엇이 제일 나은 float 해제법일까
tommyzip - css 레이아웃
tistory - float 해제
flexboxfroggy - flex 연습 사이트

새로 알게 된 내용

• 오늘도 스크린리더기와 관련된 접근성을 많이 배웠다! 이렇게 요소 하나하나마다 유저들의 상황을 고려해서 만드는구나... 신기하고 새롭다. 맨날 봐왔던 사이트들에서 그런 깊은 뜻이 숨어있을 줄이야! 그런 의미로 클론코딩 사이트는 naver, kakao로 정했다.
• flex 참 좋은 아이인데 float만 써와서 그런가 뭔가 어색하다😂 연습이 필요하다.

한 주 마무리

• 첫 주를 마무리하며 주간 위클리 설문조사를 했다. 설문조사를 작성하면서 이번주에 내가 얼마나 성장했는지 몸소 느낄 수 있었다. 일주일 전만 해도 표준 마크업은 개념만 알고 접근성은 아예 몰랐고 깃허브는 썰렁했었다. 협업의 ㅎ도 못해봤는데 일주일 사이에 팀채널과 회고그룹까지 구성했다. 이렇게 한 주 한 주 성장하다보면 3개월 뒤에는 내가 원하는 만큼의 역량을 가질 수 있지 않을까 기대해본다!
• 주말에는 교안 노션을 한번 쭉 훑어보고 실습 위주의 복습을 진행할 예정이다.
• 이번주 스프린트에서 정한 목표(1. TIL쓰면서 지식 습득, 2. 교류 3. 관심사이트 3개 찾아보기)는 나름 이룬 것 같다!