스터디일지/CSS11 [CSS] 기본 익히기 PART 6 Position 속성 요소를 배치 할 때 사용한다. 기본 속성 static 기본 값이며 요소가 html 문서에서 일반적인 흐름을 따라 배치 되게 한다. relative static 처럼 일반적인 흐름에 따라 배치되게 한다. static 과의 차이점은 static 위치에서 top, bottom, left, right 와 같은 속성에 의한 상대적인 위치에 배치된다는 점이다. absolute 요소가 문서의 일반적인 흐름을 따르지 않게 한다. fixed absolute와 비슷하게 일반적인 흐름을 따르지 않게 하지만 static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 부모중에 relative, absolute, fixed 속성이 없다면 body태그가 기준이 된다. sticky static처럼 일반적인.. 2024. 3. 14. [CSS] 기본 익히기 PART 5 Display 속성 html 요소를 어떻게 화면에 표시할지 결정한다. display : block은 block level 요소이며 display: inlinedms inline level 요소를 말한다. 기본 속성 none - 요소를 보이지 않게 설정하며 영역을 차지하지 않는다. visibility: hidden과 다른점은 hidden은 영역만 차지하고 보이지 않는다. block - 기본적으로 가로 영역을 모두 채운다. 문단을 표시할때 주로 사용한다. inline - 컨텐츠 만큼 영역을 차지한다.(width, height를 지정할 수 없다.) inline-block - inline 처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치 되지만 block 처럼 내부 속성인 width, height 등과 같은 값을 .. 2024. 3. 14. [CSS] 기본 익히기 PART 4 Table table 태그에 border 속성을 활용해서 테두리를 그릴 수 있다. 영화 상영시간 개봉 블랙핑크 더 무비 100분 2021.08.04 개봉 정글 크루즈 127분 2021.07.28 개봉 보스 베이비2 107분 2021.07.28 개봉 더 수어사이드 스쿼드 132분 2021.08.04 개봉 블랙 위도우 134분 2021.07.07 개봉 방법-재차의 109분 2021.07.07 개봉 모가디슈 121분 2021.07.28 개봉 Box Model 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하는데 이러한 공간을 CSS에서는 Box Model 이라고 정의한다. Box Model 은 Content, Padding, Border, Margin 으로 구성되어 있다. Content - 텍스트나 이미.. 2024. 3. 13. [CSS] 기본 익히기 PART 3 Font 관련 속성 font-family - 글꼴 종류 지정 font-size - 글자 크기 지정 font-style - 글자를 이텔릭체로 지정 font-weight - 글자 굵기 지정 font-variant - 대 소문자 변경시 사용 html { /* font-family: serif, monospace; */ font-family: 'Nanum Gothic', sans-serif; /* 웹 폰트 적용 */ font-size: 16px; } .title { font-size: 28px; color: #258a48; } .content { font-size: 18px; } .font-italic { font-style: italic; } .font-weight-bold { font-weight: bold.. 2024. 3. 13. 이전 1 2 3 다음
