HTML/CSS 심화 2회차

2019 04 15

h1>a href="https://www.fastcampus.co.kr/">img src=logo.png">/a>/h1>

ㄱ. h1태그에 텍스트 내용을 명시하지 않았기 때문에 기계, 시각장애인들은 해당 섹션이 어떤 섹션인지 알 수 없습니다.

ㄴ. img태그의 alt(대체 텍스트)속성이 명시되지 않아서 기계, 시각장애인들 뿐 아니라 이미지 로드에 실패했을 때 이미지에 대한 설명을 알 수 없습니다.

ㄷ. 링크에 대한 링크 정보 텍스트가 지정되지 않았습니다.

ㄱ 부분만 작성했음

-2. HTML4.01과 HTML5 문법을 기준으로 하이퍼링크 요소인 요소의 변화에 대해 기술하시오.

ㄱ. a태그 내에 블록요소를 가질 수 있습니다. 1회차 시험에도 나왔던 내용

ㄴ. href속성을 명시하지 않는다면 placeholder의 기능을 합니다. 인터넷 검색으로도 찾을 수 있음

-3. 명시적인 아웃라인과 암묵적인 아웃라인에 대해 서술하시오.

ㄱ. 명시적인 아웃라인은

섹셔닝 콘텐츠를 통해 아웃라인을 명시하는 것으로 상위 아웃라인에 종속되는 아웃라인이 생성됩니다. 예를 들어 다음 코드는 같은 h1태그를 사용한다고 해도 섹셔닝 콘텐츠인 section 태그로 아웃라인을 명시했기 때문에 종속되는 아웃라인을 생성합니다.

ㄴ. 암묵적인 아웃라인

헤딩 콘텐츠에 의해 암묵적으로 아웃라인이 지정됩니다. 헤딩 콘텐츠의 레벨에 의존합니다.

-4. box-sizing 속성의 content-box와 border-box의 차이점에 대해 설명하시오.

content-box
content-box 속성은 border와 padding 값을 부여할수록 그 값만큼 width/height값에 더해져 박스의 크기가 결정되게 하는 속성입니다.

border-box
border-box 속성은 border와 padding 값을 부여하더라도, 박스의 크기는 width/height값을 유지한채 박스 내부에 border와 padding 영역을 잡습니다.

-5. 다음과 같은 HTML 마크업을 float 속성을 활용하여 배치했다. 의도와 다르게 로고 이미지가 웹표준이란? 제목과 나란히 보여지는 것이 아니라 설명 단락과 나란히 보여지는 이유가 무엇인지 서술하시오.

list-brief 클래스를 가진 요소가 부모 박스의 크기 때문에 밀려 내려왔습니다. 때문에 list-thumbnail 클래스를 가진 이미지는 list-brief 클래스 를 가진 요소가 밀려 내려와 생긴 공간(가용할 수 없는 라인 box)을 차지하지 못합니다.