반응형 웹 디자인 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적 🡪 화면 크기에 ‘반응’해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인 모바일 기기를 위한 뷰포트(viewport) 뷰포트 : 실제 내용이 표시되는 영역 PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서 의도한대로 표시되지 않음 🡪 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용 표시 그리드 레이아웃이란 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준 웹 사이트 화면을 여러 개의 칼럼(column)으로 나눈 후..

background-color 속성 웹 문서의 요소에 배경색 지정 16진수나 rgb 값, rgba 값 또는 색상 이름 사용 배경색은 상속되지 않는다 background-clip 속성 배경을 어디까지 적용할지 지정 ( padding 까지 먹힌다.) 클립까지 히든 잡고 패딩 솔리드 보더박스 background-image 속성 배경 이미지 파일 경로 지정 background-repeat 속성 배경 이미지 반복 여부 및 반복 방향 지정 repeat 은 기본값 background-position 속성 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정 ① 백분율 : 배경 이미지의 가로 위치와 세로 위치를 %로 나타냄. 예) background-postion: 0% 0% , background-po..

2교시 시작 box container2 는 box container1에 영향을 받는다. .box-container2{ /* position: relative; */ top: 100px; left: 100px; border: 1px solid black; width: 300px; height: 300px; } 포지션을 지운다면 relative 가 없다면 body 까지 올라간다. 가운데 상자가 바깥상자가 커지던 작아지던 가운데 정렬 하시오 선생님 border-radius image 프로필 .profile-img-box{ display: flex; justify-content: center; align-items: center; border: 5px solid #dbdbdb99; border-radius: 5..

display 속성 요소의 배치 방법 결정. 웹 개발 시작하기 웹 개발 시작하기 블록 레벨 요소, 인라인 레벨 요소를 바꿀 때 사용하는 속성 값 float 속성 요소를 왼쪽이나 오른쪽에 떠 있게 만듦 left, right, bottom, top 속성 웹 요소의 위치를 지정하는 속성 position 속성 웹 문서 안에 요소들을 배치하기 위한 속성 .box1{ left: 100px; border: 1px solid black; width: 300px; height: 100px; background-color: brown; } 이렇게 하면 백날 해도 수정 안됨 .box1{ position: relative; left: 100px; border: 1px solid black; width: 300px; heigh..

블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% 예) , 등 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 웹 브라우저에서 웹 문서 열기 박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택 개발자 도구 창 위에서 [Computed] 탭 클릭 해당 부분의 박스 모델이 그림으로 표시됨 width, height 속성 실제 콘텐츠 영역의 크기 지정 box-sizing 속성 실제 박스 모델의..

text-shadow 속성 텍스트에 그림자 효과를 추가하는 속성 text-transform 속성 영문 텍스트의 대문자나 소문자를 바꾸는 속성 letter-spacing, word-spacing 속성 글자간 간격, 단어간 간격 .spacing{ letter-spacing: 10px;/*글자간 간격*/ word-spacing: 10px; /*단어간 간격*/ } list-style-type 속성 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성 웹 개발 시작하기 HTML 기본 문서 만들기 다양한 내용 입력하기 입력 양식 작성하기 CSS 기본 표 스타일 (많이 쓰인다.) caption-side 캡션(설명글)은 기본으로 표 위쪽에 표시됨. 이 속성을 이용해 아래쪽에 표시 가능 border 표의 바깥 테두..