웹프론트엔드3 [CSS] 패딩과 마진 (padding, margin 속성을 통한 레이아웃 구성) 패딩과 마진(매우 중요) border 기준으로 안쪽 여백은 padding 바깥 여백은 margin이다. 개발자 도구로 마우스를 올렸을 때 초록과 주황으로 구분할 수 있다. F12로 접속 후 Element에서 영역 포인터 아이콘 선택 혹은 Ctrl + Shift + C로 개발자 도구의 마우스 포인터를 사용할 수 있다. 스타일 시트에서 p 태그에 패딩을 넣어보겠다. p { border: 1px solid #777; width: 300px; height: 100px; padding: 10px; /* 전부 */ padding: 10px 20px; /* 위아래, 좌우 */ padding: 10px 20px 30px 40px; /* 12시부터 시계방향 */ } padding right, left 등을 사용하여 하나.. 2022. 9. 26. [HTML, CSS] display 속성 (메뉴 만들기) display 속성 (중요) display 속성은 태그 영역 표현 방식을 지정하는 속성이다. none - 태그를 화면에서 보이지 않게 한다. block - 태그를 block 형식으로 지정 inline - 태그를 inline 형식으로 지정 우리는 html에서 블록과 인라인 속성에 대해 배웠다. HTML 기초지식(태그, 블럭과 인라인, ul, li, 하이퍼링크, table form 예제) 방학 중 특강을 들으며 내가 배운 것을 블로그에 정리해보겠다. 이 글은 간단하게 핵심적인 html, css 기초 문법을 보고 이해하는데 도움이 될 것이다. 교재 : html5 웹 프로그래밍 입문 (3판) 웹이란? anhanryang.tistory.com CSS에서는 HTML에서 선언한 인라인 요소도 블록 형식으로 바꿔줄 수.. 2022. 9. 26. [CSS] position-fixed (메뉴, 사이드 바 스크롤 시 고정) position-fixed 우리가 사용하는 웹페이지 화면을 보면 오른쪽 하단이나 메뉴 등이 고정돼있는 경우를 많이 봤을 것이다. 예를 들면 밑의 사진처럼 웹에서 블로그 글을 작성할 때 상단 도구 바, 웹에서 쇼핑을 할 때 양측 사이드 광고 블록 등 마우스 스크롤을 해도 화면 내용만 바뀔 뿐 고정된 콘텐츠들이 있다. 이것을 바로 position의 fixed 속성을 사용하여 고정해주는 것이다. z-index 위에 설명한 absolute 3색 예제를 보면 파란색이 빨간색, 노란색 둘 다 덮어 위에 표시되는 것을 알 수 있다. 포지션은 z 축을 사용하는 것이다. 그러므로 z-index 속성을 사용하여 우선순위 등을 정해주어야 하는 경우가 있다. 1번 빨간 동그라미로 콘텐츠의 높이를 스크롤로 확인해야 할 만큼 준.. 2022. 9. 21. 이전 1 다음
