홈페이지 만들기/2단계. CSS16 CSS 박스 모델1 | content 콘텐츠 border 보더 padding 패딩 margin 마진 CSS 박스 모델 | content 콘텐츠 border 보더 padding 패딩 margin 마진 오늘은 content 콘텐츠, border 보더, padding 패딩, margin 마진의 개념을 확실히 잡아 보도록 하겠습니다.위 네 가지 개념은 CSS 디자인에 매우 중요한 요소이므로 꼭 정확히 이해하고 넘어가시기 바랍니다. 위 개념들을 확실히 잘 알아야 이미지 및 콘텐츠들을 내가 원하는 위치에 정확히 배치할 수 있기 때문입니다. CSS에서 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 그 대상이 블록 요소여야 합니다. 블록 요소는 한 줄 전체를 차지하면서 네모난 박스 모양으로 자신만의 영역을 만들기 때문입니다. 우리는 이 네모난 영역을 '박스 모델'이라고 부르고, CSS로 이 박스 모델들을 .. 2020. 12. 23. CSS background 배경 관련 스타일(background-position) background-position - background-position 속성을 사용하면 배경 이미지의 위치를 지정해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 {background-position : 수평위치 수직위치; } - 수평위치와 수직위치는 세 가지 방법으로 입력해줄 수 있습니다. - [키워드, 백분율, 길이]로 입력해줄 수 있습니다. - 첫 번째 방법은 키워드로 입력하는 방법입니다. - 키워드로 입력할 때 수평위치(↔)는 left, center, right 중 하나를 입력할 수 있습니다. - 키워드로 입력할 때 수직위치(↕)는 top, center, right 중 하나를 입력할 수 있습니다. - 만약 속성값을 하나만 입력하면, 입력 값을 자동으로 수평위치로 인식합니다. 수직위치.. 2020. 12. 19. CSS background 배경 관련 스타일(background-size) CSS background 배경 관련 스타일(background-size) 오늘은 배경 이미지의 크기를 조절하는 방법을 알아보겠습니다. background-size - background-size 속성을 사용하면 배경 이미지 크기를 조절해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-size : 속성값; } - 속성값으로 auto, contain, cover, 크기값(px 등), 백분율(%)이 들어갈 수 있습니다. - 위 예시는 div 태그 안쪽에 배경 이미지를 설정하고 있습니다. - div 태그의 크기는 브라우저 화면의 크기로 하였습니다. - 배경 이미지는 반복을 하지 않도록 설정하였습니다. - 속성값 auto는 원래 배경 이미지 크기만큼 표시됩니다. - 따라서 위에.. 2020. 12. 17. CSS background 배경 관련 스타일(background-image, background-repeat) CSS background 배경 관련 스타일(background-image, background-repeat) background-image - background-image 속성을 사용하면 배경에 이미지를 넣어줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-image: url(파일 경로); } - 파일 경로는 상대 경로와 절대 경로로 지정해줄 수 있습니다. - 상대 경로란 index파일을 기준으로 지정하는 방법입니다. 자세한 내용은 아래를 참고해주세요. 2020/10/11 - [홈페이지 만들기/1단계. HTML] - HTML 이미지(img) 태그: 태그와 경로 설정(src / ..) - 절대 경로란 'http://'로 시작하는 경로를 말합니다. - 절대 경로를 지정하면.. 2020. 12. 13. CSS background 배경 관련 스타일(background-color, background-clip) CSS background 배경 관련 스타일(background-color, background-clip) 오늘은 배경색과 배경 범위를 지정해주는 스타일을 알아보겠습니다. background-color - background-color를 사용하면 배경 색을 지정해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-color: 색상 이름; } - 위 예시에서는 두 영역에 각각 배경 색을 다르게 지정해주었습니다. - 문서 전체의 배경이 되는 body는 배경색을 gray로, div태그에는 배경색을 pink로 지정해주었습니다. - 물론 색상 이름은 pink와 같은 색상 이름뿐만아니라, 16진수, rgb(a) 등을 입력해도 됩니다. - 색상 이름, 16진수, rgb(a)가 뭔지 잘 .. 2020. 12. 10. CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지? CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지? CSS는 지금까지 무수한 발전을 해왔습니다. 그리고 지금도 계속 발전하고 있습니다. 현재는 CSS1을 거쳐 CSS3를 개발 중에 있습니다. 그런데 CSS3는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들고 있습니다. 이 주제별 규약을 'CSS 모듈'이라고 부릅니다. 모듈들은 개발 속도가 다르기 때문에 일부는 완성되었고 아직 개발 중인 것도 있습니다. 따라서 HTML과는 다르게 CSS는 아직 '웹 표준'이 정해지지 않았습니다. CSS는 웹 표준이 정해지지 않았기 때문에 브라우저에 따라 다른 방식으로 지원됩니다. 그래서 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해, 스타일 .. 2020. 12. 9. 이전 1 2 3 다음 반응형
