HTML, CSS (3) 리스트형 TIL 07 CSS Position Display 1. Css Position css position 속성은 문서 상에 요소를 배치할 방법을 지정한다. 대표적으로 relative, absolute, fixed등이 있다. 01. relative 빨간박스와 파란박스를 만들어서 어떤 포지션값도 주지않은 상태이다. 디폴트값은 static이고 이는 아무영향을 미치지않는다. 이제 파란박스에 position값을 relative로 주면 어떻게 변하지 보면 relative는 원래 위치에서 top, left에서 -100px, 100px만큼 떨어진곳에서 위치하는걸 볼 수 있다. 값이 음수면 방향이 반대로 된다. 02. absolute absolute는 부모 요소의 position이 relative, fixed, absolute중 하나면 부모 기준으로 위치가 결정되는데 그 .. TIL 06 Semantic tag Web 1. 시맨틱 웹이란? 데이터 및 정보의 양이 빠르게 증가하자 이들을 처리하는 방안으로 시맨틱 웹(Semantic Web)이 소개되었다. 시맨틱 웹은 사람이 아닌 기계(컴퓨터)가 직/간접적으로 처리할 수 있는 데이터를 위한 웹이다. 컴퓨터가 처리하는 정보는 웹사이트들의 HTML코드인데 이 코드만으로 의미를 인지하기 위해서 시맨틱 요소를 해석하게 된다. 2. 시맨틱 태그란? 컴퓨터(검색엔진)이 데이터를 처리하면서 중요한 정보와 그렇지 않은 정보를 필터링을 해야하는데 이를 돕는것이 시맨택 태크다. HTML5에 추가된 시맨틱 태크는 , , 등이 있다. 이는 웹 페이지에서 개발자와 컴퓨터에게 각 항목이 어떤 의미를 가지는지 전달하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해.. CSS position: fixed 겹치는 현상 해결 Html Mypage 내정보 로그인 설정 홈 전체 게임 보이는라디오 스포츠 VOD CSS .navbar { display: flex; justify-content: space-between; margin-bottom: 30px; width: 100%; background-color: thistle; } .navbar__logo { margin-left: 20px; } .navbar__menus { list-style: none; display: flex; margin-right: 30px; } .navbar__menu { margin: 10px; } .mainscreen { display: flex; } 위 화면과 같이 navbar와 밑에 있는 화면요소가 겹치는 것을 볼 수 있다. 크롬 도구로 검사를 해.. 이전 1 다음
