- 04/04 실습과제 피드백
- 04/05 TIL
- 04/05 TABLE 태그 이용 실습(카타르 월드컵 조 구성 페이지)
★ 0404일 실습과제로 했던 구글 폼 페이지 구현하기에서 나온 피드백
- Form 태그 전체를 fieldset 으로 묶고 legend 넣어주면 접근성 측면에서 좋다.
- label input 명시적으로 바꾸기 (내가 구현 한 방식엔 CSS 적용 때문에 명시적,암묵적 둘 다 있었음)
정보통신접근성 때문에 대부분 명시적으로 표현하는 것을 권장한다고 한다.
나같은 경우에는 radio 와 text 를 label 로 묶어서 줄바꿈을 해주려고 사용했다.
실제로 강사님은 질문 전체를 ul 로 묶어서 각 각 li 로 구현 하셨다.
3. section 안에 꼭 h 태그 작성하기
오류는 아닌데 필수에 가까운 권장 , 나는 다 section 으로 묶어놔서 바꿔야한다..
04/05 TIL
시멘틱한 마크업으로 코딩한다 ?
- 유지보수측면 : 다른 사람이 해당 코드를 보고 유지보수를 쉽게 할 수 있도록 주석없이
코드를 확인 할 수 있게 하는 것이 중요하다 - 기계적측면 : 사람이나 기계(검색엔진)이 해당 마크업을 읽고 그 의도를 알 수 있는 코드로 작성하는 것
heading 태그 , h1 ~ h6 은 제목을 포함해 익명 영역을 생성한다
meta 의 "og:title" 의미
- Open Graph Protocol (Facebook 에서 만듬)
- https://ogp.me/
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta
property="og:image"
content="https://ia.media-imdb.com/images/rock.jpg"
/>
...
</head>meta "twitter:description"
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
Cards markup
This page and certain other Twitter sites place and read third party cookies on your browser that are used for non-essential purposes including targeting of ads. Through these cookies, Google, LinkedIn and Demandbase collect personal data about you for th
developer.twitter.com
Table 태그
중요포인트 & 헷갈렸던 부분
<caption> 테이블의 제목이나 설명을 의미하며 <table> 의 첫번째 자식으로 사용해야한다.
웹 접근성 측면에서 중요하니 꼭 넣어주도록 하자
<caption> 은 꼭 <table> 태그의 바로 아래에 넣어줘야한다 !!
<colgroup>와<col> 요소를 통해 한 열에 공통적인 스타일을 주는것이 가능하다.
scope : <th> 요소에 scope 속성을 사용해 <td> 와의 연결 관계를 설정할 수 있다.
이것도 웹 접근성을 위해 사용하는 속성으로 필수사항이다.
calspan , rowspan : 처음에 좀 헷갈렸던부분이.. rowspan 이라고 적혀있는데 방향은 col 방향으로 합쳐져서 이해가 잘 안갔다가 row 속성끼리 합쳐져서 rowspan 인걸 이해해서 이제 안 헷갈린다.
04/05 TABLE 실습
table 태그로 위 사진같이 구현하도록 하는 실습을 주셨다. CSS는 아직 하지 않아서 선택이다
다 넣진 않았지만 원본이랑 모양은 비슷하게 CSS도 조금 적용해서 구현했다.
제목은 Caption으로 감싸줬고 colgroup을 이용해서 width 25%로 똑같이 만들어 줬다.
A~D 조 1개 E ~ H조 1개 씩 2개 TABLE 을 만들었는데 하나로 해서 중간에 빈 td으로 만드는 방법도 있었다.
짬내서 할일
이미지 스포트라이트 기법 복습하는겸 예제하나 만들어보기
'멋사 FE 과정' 카테고리의 다른 글
| [멋사/CSS] Float 에 대해서 (단점과 해결 방법) (0) | 2022.04.13 |
|---|---|
| [CSS] Vertical-align 에 대해서 (0) | 2022.04.10 |
| [0407/CSS] overflow 에 대해서 (display:none 와 차이) + BFC (0) | 2022.04.07 |
| 04/06 TIL (1) | 2022.04.06 |
| 0404_TIL & 구글 설문조사 form 실습 (0) | 2022.04.04 |