시럽로그

내가 근무하는 회사의 홈페이지는 아주 오래 전, 프론트엔드와 백엔드의 구분조차 불명확할 때 설계되어 (아마 2009년 쯤...) 현재까지 이어져 오고 있다. 그로 인해 디자인보다 기능에 초점을 맞추어져있고 table 태그로 구성된 레이아웃이 매우 많다. table 태그로 레이아웃을 구성하는 것은 지양해야 하는 건 확실하다. 그렇다면 그 이유는 무엇일까? 1. HTML의 의미론적 용도에 부합하지 않음: - 태그는 주로 표 형식의 데이터를 표현하기 위한 것으로 의미론적으로는 데이터를 나타내는 데 사용되어야 한다. 레이아웃을 구성하기 위해서는 구조적으로 의미있는 태그인 와 CSS 스타일링을 사용하는 것이 더 적절하다. 2. 유지보수 및 가독성: - 디자인 변경 또는 콘텐츠 추가/수정이 필요할 때 테이블 레이아..

웹 페이지에 이미지를 넣는 방식은 2가지가 있다. a. HTML에서 태그로 넣는 방법 b. css에서 background 속성을 활용해 넣는 방법 { background-image: url("이미지 링크"); } 이 둘의 차이점은 무엇일까? a는 이미지 로딩에 실패했을 때, alt값으로 대체 텍스트를 출력할 수 있으나, b는 컴퓨터에서 읽지 못하고 디자인적 기능만 한다. a는 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 b는 그렇지 않다. 💡 img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있어, alt값을 검색엔진이 이해하여 웹에 노출시키지만 background-image는 스타일의 속성이기 때문에 검색엔진이 인식하지 못하는 것이다. 이 둘은 각각 어떨 때 사용하면 좋을까? a. 태그 검..

display는 화면이 렌더링되었을 때 어떠한 특정 영역이 표시되는데 성질을 부여하는 property이다. 문서 내에서 요소가 가지고 있는 고유한 속성을 변경할 수 있다. block block은 한 영역을 차지하는 박스형태를 가진다. 기본적으로 width값이 100%이며 height, width, margin, padding을 지정할 수 있다. , , , , , , , , , , , , , , , , , ~, .... inline inline은 주로 텍스트를 넣을 때 사용되는 형태이다. width값이 컨텐츠 영역만큼 잡히며 width와 height를 명시할 수 없다. margin은 위아래에는 적용되지 않는다. padding은 좌우에는 모두 적용되지만, 위아래에는 시각적으로는 추가되나 공간을 차지하지는 않..

position 속성은 문서 상에 요소를 배치하는 방법을 지정해준다. 즉 HTML 요소를 CSS로 위치를 결정하는 방식을 설정한다. 1. static position position 속성을 지정하지 않았을 땐, static(정적 위치)가 default 값으로 지정된다. static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않는다. 정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다. 2. relative position relative position(상대 위치) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다. HTML 요소의 기본 위치란 해당 요소가 정적 ..