반응형 개발3 시맨틱웹(semantic web) / 시맨틱태그(semantic tag) 정의 시맨틱(semantic) : 의미를 갖는 시맨틱 태그(semantic tag) : 의미를 갖는 태그 시맨틱 웹(semantic web) : 시맨틱 태그를 활용하여 제작된 웹 구글,네이버와 같은 검색엔진에서 정보를 검색할 때, 얻고자하는 유의미한 정보를 가장 많이 갖고 있는 웹사이트(유의미한 웹사이트)일수록 상단에 노출되는 것이 이상적이다. 수 많은 웹사이트 간 '유의미한 정도(시맨틱한 정도)'를 등수매김하는 일은 컴퓨터가 하는데, 이 때 웹이 얼마나 유의미하게(시맨틱하게) 제작되었는지 평가하기 위해 객관적인 기준이 필요하다. 컴퓨터가 활용하는 여러가지 척도 중 하나가 바로 '시맨틱한 요소(시맨틱태그)가 웹 제작에 활용된 정도'이다. 사용하는 이유 위와 같은 구조의 웹사이트를 만들 때, 각각의 섹션을.. 2022. 9. 24. display(block/inline/inline-block) display html태그를 통해 만든 요소들은, 초기설정된 디폴트 값 만큼 웹 화면상에서 제각각 일정 크기의 공간을 차지한다. display 속성을 사용하면 엘리먼트가 화면상에서 보여지는 방식을 변경할 수 있다. display 속성을 통해 부여할 수 있는 여러가지 속성값 중 가장 기본이 되는 세 가지가 (block/inline/inline-block)이다. block div태그,p태그로 감싸여진 엘리멘트는, 웹 화면 상에서 부모요소의 가로길이 100%만큼의 영역을 차지하도록 디폴트 값이 설정되어 있다. 이러한 성질을 갖는 요소들을 두고 block 속성을 갖는다고 표현한다. 'display:block;'속성의 엘리먼트는 width, height, padding, margin 값을 변경할 수 있다.(inl.. 2022. 9. 24. position(static/relative/absolute/fixed) 사용하는 이유 웹 제작을 하며 레이아웃을 배치하거나 객체 위치를 변경해야 하는 경우가 있는데, html/css에서는 객체가 xy좌표계 상에 위치하고 있는 것처럼 다룬다. ex) 상하좌우 방향으로 객체가 이동하길 원하는 만큼 픽셀단위로 'top:100px,left:50px'와 같이 값을 주는 식 이때 좌표계 개념을 사용하는 만큼, '왼쪽으로 50px 이동시킨다'라고 했을 때 어디를 기준으로 50px 만큼 이동시킬 것인지 그 기준점을 명확히하는 것이 중요하다. 객체마다 좌표계 기준점을 부여하고자 사용하는 개념이 바로 position 속성이다. 개별 속성 설명 css를 통해, 객체에게 position 속성인 [static/relative/absolute/fixed]중 하나를 부여하면, 그에 맞게 좌표계 기준점.. 2022. 9. 24. 이전 1 다음 반응형
