211103 프론트엔드 스쿨 3일차

과제 풀이 (이호준 강사님)

과제 풀이하면서 새롭게 알게된 내용

1. br
줄바꿈의 용도로 br를 사용하면 스크린리더가 연속적인 문장으로 인식하지 못한다

❌ <p>
	맛있는 <br>
	바질 토마토 파스타
   </p>

br은 본래 목적에 맞게 써야하지만 실무에서는 시간이나 상황 때문에 쓰는 경우도 있다고 한다
그래서 클론코딩할려고 사이트들 살펴보면 줄바꿈의 용도로 쓰이는 상황을 목격하게 되는 것 같다


2. button과 a
a를 button으로 감싸서 써도 되고
a만 css로 꾸며서 사용해도 된다

⭕ <button><a href=""></a></button>
⭕ <a href=""></a>

3. strong vs b
strong을 쓴다


4. section과 heading tag
section안에는 항상 heading tag가 들어가야 한다
각 section의 주제가 무엇인지 heading tag을 통해 명시해줘야 스크린리더를 사용하는 유저가 사이트를 잘 이해할 수 있다
css로 안보이게 하면 되지만 생략하거나 없애면 안된다


5. 전화번호
전화번호를 p태그로 입력하면 모바일에서 클릭했을 때 전화가 걸리지 않는다

<a href="tel:02-1111-2222">02-1111-2222</a>

과제 풀이 후 느낀 점

• 처음부터 하나씩 뜯어보며 마크업을 알려주니까 내가 잘못한 부분이나 새로 알게 된 부분을 명확하게 파악할 수 있어서 좋았다

• 나름 div 안쓴다고 했는데 강사님 풀이 버젼이랑 비교해서 보니까... div농사 잘됐다...

• article, figure, address 와 친해지자

• 네비게이션 메뉴는 ul,li,a 중첩해서 사용하는 거 잊지 말자

<ul>
    <li><a href="#">Forum</a>
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
       </ul>
  </li>
</ul>

• 웹퍼블리셔 국비 수업이 코딩의 재미를 알려주고 프론트엔드의 세계로 이끌어준 참 고마운 수업이었지만... 마크업을 의미있게 배우지는 못한 거 같다😢
  3일차만에 뼈저리게 느끼고 있다... 괜찮아 지금부터 다시 기초를 쌓는다고 생각하자! 아자자
  
  

sample 로그인, 약관동의, 회원가입

강사님께서 실무에서 사용하는 로그인, 약관동의, 회원가입 서비스 sample을 준비해오셔서 마크업을 같이 살펴봤다
그 중 새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. 약관 동의 유도

• 약관동의 버튼에서 checked는 "약관에 동의하지 않습니다"에 설정
• 유저가 직접 "약관에 동의합니다"을 클릭하도록 유도한다

<div>
    <label>
        <input type="radio" name="terms1">
        <span>약관에 동의합니다</span>
    </label> 
    <label>
        <input type="radio" name="terms1" checked>
        <span>약관에 동의하지 않습니다.</span>
    </label> 
</div>   

2. label과 input

id로 label과 input을 연결해주면 label만 클릭해도 input에 포커스가 간다

수업 내용

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

HTML

1. 테이블 태그

• th을 사용해야 시멘틱하다
• th는 자동으로 중앙정렬
• 데이터를 볼 때는 가로, 작성할 때는 세로니까 헷갈리지 말 것
• thead, tbody, tfoot을 꼭 써줘야 자바스크립트에서 컨트롤할 수 있다
  
  

2. 인라인과 블록 요소

• 블록 요소 : article, header, nav, section, div 등
• 인라인 요소 : span, a, img, input, label 등
• 블록 요소는 인라인, 블록 요소 다 포함할 수 있다
• 인라인 요소들은 인라인 요소만 중첩이 가능하다
• css display 속성으로 인라인의 상태를 블록으로 변경한대도 그 안에 블록 요소를 중첩할 수 없다
• p, hr 둘다 블록 요소이지만 p 태그 안에 hr을 쓰지는 않는다
  
  

CSS

1. 이거 하나는 외우고 가요

• property : 속성, font-family,font-size 에 해당하는 부분
• value : 값, 16px, blue에 해당하는 부분
  
  

2. CSS 적용하는 3가지 방법

• 인라인, 내부 스타일 시트, 외부 스타일 시트
• 우선순위 : 인라인>내부>외부
  
  

3. RESET CSS

• 각 브라우저에서 자체적으로 적용되어 있는 기본 스타일을 초기화 시킴
• 원하는 스타일을 적용하기 편하게 만들어준다
• 기본적으로 저장해서 사용해야 한다
  
  

4. 선택자 id와 class의 차이

• section처럼 구역을 구분할 때는 id 사용, css로 꾸밀 필요가 있을 때는 class 사용
• class는 중첩해서 사용할 수 있다. (id는 불가)
• 페이지 내 class는 여러개가 존재할 수 있다. (id는 불가, 유일해야 함)
  
  

5. 속성 선택자

• 태그[속성이름="속성값"]
  특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택

[title="first des"]

<h2 title="first text"></h2>   
<p title="first-des"></p>         
<p title="first des"></p>      ✔  

• 태그[속성이름~="속성값"]
  특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택

[title~="first"]

<h2 title="first text"></h2>   ✔
<p title="first-des"></p>         
<p title="first des"></p>      ✔  

• 태그[속성이름*="속성값"]
  특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택

[title*="first"] 

<h2 title="first text"></h2>   ✔
<p title="first-des"></p>      ✔   
<p title="first des"></p>      ✔  

• 태그[속성이름$="속성값"]
  속성값으로 끝나는 요소를 모두 선택
  실무에서 파일 구분을 위해 쓰이곤 함

a[href$=".pdf"]{
    color: black;
}

5. 가상 클래스 선택자와 가상 요소 선택자는 다르다

• 가상 클래스 선택자 : :hover,:focus, :nth-child(1) 등
• 가상 요소 선택자 : ::before, ::after
• 가상 클래스 선택자는 콜론이 1개, 가상 요소 선택자는 콜론이 2개 (간혹 1개인 것은 레거시 브라우저 호환을 위한 방식)
• 가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입, 가상 요소 선택자는 마크업 없는 요소를 삽입
  
  

6. 가상 요소 선택자
드래그 안됨

7. 우선순위
id(100점) > class(10점) > tag(1점)

ul#content li.active   → 1점+100점+1점+10점 = 112점

8. 고정 크기 단위

• px
• css 애니메이션 만들 때 px 쓰는 편
  
  

9. 가변 크기 단위

• em : 부모의 폰트사이즈에 영향을 받는다
• rem : html의 폰트사이즈에 영향을 받는다

html, body {
    font-size: 10px;
}
div {
    font-size: 2em;
}
.one {
    font-size: 2rem;
}

<div>
    <!-- 10px * 2 = 20px -->
    <div>
        <!-- 20px * 2 = 40px -->
        <div>
            <!-- 40px * 2 = 80px -->
            hello world
        </div>
    </div>
</div>

<div>
    <div>
        <div class="one">
            <!-- html 폰트 사이즈 10px * 2 = 20px -->
            hello world
        </div>
    </div>
</div>

• % : 부모가 가진 크기의 절반 (화면의 절반 아님)
• vw : 보여지는 화면 기준

.one {
    /* % : 부모가 가진 크기의 절반 (여기선 body, 화면의 절반 아님) */
    width: 50%;
    height: 200px;
    background-color: darkblue;
}
.two {
    height: 100px;
    width: 50%;
    background-color: red;
}
.three {
    /* vw : 보여지는 화면 기준 */
    height: 100px;
    width: 50vw;
    background-color: red;
}

<div class="one">
    <div class="two">%</div>
</div>
<br>
<div class="one">
    <div class="three">vw</div>
</div>

오늘의 TIP

1. vscode 단축키

• 감싸는 태그 만들기 : 원하는 문구 드래그한 후에 alt+w (htmltagwrap 설치해야 함)
  태그 생성 후 스페이스바 누르면 여는 태그에만 포커스
• 한 줄 삭제 : 커서 가있는 상태에서 shift + del

2. 기타

• range, progress의 숨겨진 구성을 보는 방법 : <개발자 도구 - 환경설정 - 요소 - 사용자 에이전트 그림자 DOM 표시>
• 피그마에서 다른 유저의 마우스 숨기는 법 : Window : ctrl + alt + \

3. 참고 링크
css 참고 도서 : http://www.yes24.com/Product/Goods/98858290
mdn enabled : https://developer.mozilla.org/ko/docs/Web/CSS/:enabled

새로 알게 된 내용

• p 태그로 전화번호를 기재하면 모바일상에서 전화연결이 안된다고 한다. 이런 접근성은 아예 생각지도 못했던 부분이라 알게 되서 기쁘다!
• 속성 선택자는 항상 어렴풋이 이해했는데 이번에 개념을 확실히 하게 됐다

과제

과제가 없다!
대신 오늘 수업 복습 복습~