쌓고 쌓다

웹 사이트를 만들며 PC와 모바일 환경에서 달리 화면을 보이게하길 원했다. 부트스트랩을 이용해서 반응형 웹을 만들고 있는데 이상한 부분이 있는 것이다. 보여질 컨텐츠가 1 2 3 4 순서라고 하자.화면이 작아졌다면 컨텐츠를 행을 늘려1 23 4이렇게 컨텐츠를 보여지거나1234이렇게 컨텐츠를 보여주는 것이다. 이상하게 다음과 같은 현상이 발생했다.PC에서는 웹 창 크기를 모서리를 드래그하여 조절할 수 있다.화면을 줄여서 컨텐츠의 순서가 1 2 3 4 순에서1 23 4 과 같이 잘 반응하여 변경되는데 모바일에서 접속해보면 화면이 다음과 같이 보이는 것이다.화면은 작아졌지만 PC에서 보는 화면 그대로 크기가 유지되어 있다. 알고보니 PC와 모바일의 뷰포트가 동일했던 것이였다.뷰포트? 우리가 볼 수 있는 시야의..

비정형적으로 메뉴를 배치하는 방법으로 position 옵션을 사용한다. html 코드 프로그래밍 강좌 HTML 강좌 CSS 강좌 파이썬 강좌 C# 강좌 JAVA 강좌 JS 강좌 css * { margin: 0; padding: 0; } h3 { margin: 10px auto; width: 650px; text-align: center; border: solid 1px black; } #box { margin: 0 auto; width: 650px; height: 530px; background-color: green; position: relative; } #box div { background-color: yellow; width: 100px; height: 70px; text-align: cente..

레이아웃 많이 들어봤지만 정확히 알진 못했다. 레이아웃은 HTML 요소들을 브라우저 화면에 배치하는 작업을 말한다. 레이아웃 작업은 기본적으로 화면의 상단에서 시작하여 좌측에서 우측 방향으로 이루어진다. 하단까지 모두 작업을 한다면 전체 레이아웃이 완성되는 것이다. 박스 요소 중앙 배치 태그 같은 박스형 요소를 화면에 배치하여 그 속에 세부적인 레이아웃 작업을 하는 경우가 있다. 이 박스를 중앙에 배치하는 방법을 알아보자. html 안녕하세요. 반갑습니다. - 박스의 중앙 배치 태그와 같은 박스 요소를 배치할 때 상하단 마진을 0으로 좌우측 마진을 auto로 설정한다. margin: 0 auto; - 글자와 이미지의 중앙 정렬 글자만 중앙 정렬할 때 사용하는 속성 text-align은 아니다. 이미지 또..

1. 목록 꾸미기 HTML의 목록 태그(ul, ol, li)를 이용하여 목록을 만들 수 있다. 이 목록 태그에 CSS를 적용해 보자. 글머리 기호 => list-style-type li { list-style-type: square; } 내용 1 내용 2 list-style-type 옵션으로 목록의 글 머리 기호를 변경할 수 있다. list-style-type 속성 값 속성 값 의미 square 정사각형 none 글 머리 기호를 사용하지 않음 circle 빈 동그라미 disc 꽉찬 동그라미(기본값) 글머리 이미지 => list-style-image li { list-style-image: url('./img/icon.png') } 수평 목록 목록에 사용하는 ul, ol, li 태그는 화면에 표시될 때 기..

display 속성 HTML 요소를 화면에 표시하는 디스플레이 방식에는 인라인(inline)과 블록(block)이 있다. 1. display: inline div { background-color: #eeeeee } span { display: inline; border: solid 1px black; } 글자1 안녕하세요! 글자2 인라인 방식에서는 HTML 요소를 수평 방향으로 표시하고 줄 바꿈이 일어나지 않는다. 2. display: block div { background-color: #eeeeee } span { display: block; border: solid 1px black; } 글자1 안녕하세요! 글자2 블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 전체 행(하나의 행)을 ..

배경 이미지 삽입 => background-image 속성 사용. body { background-image: url("./img/texture.png") } 아래의 이미지를 배경 이미지로 삽입한다고 하자. 배경 이미지가 삽입될 영역보다 작은 경우, 부족한 부분은 배경 이미지를 수평과 수직 방향으로 반복된다. 배경 이미지 반복 body { background-image: url("./img/texture.png"); background-repeat: no-repeat; background-position: right top; } background-repeat 속성 이미지가 반복되지 않게 하거나 수평 또는 수직방향으로 반복 설정이 가능하다. 속성 값 의미 no-repeat 배경 이미지를 반복하지 않음 r..

선택자 CSS로 꾸미고자 하는 HTML의 영역을 선택하는 데 사용. 전체 선택자 HTML 요소 전체를 선택한다. 제목 내용 태그 선택자 꾸미고자하는 태그의 영역을 선택한다. 1.제목 내용1내용2 2.제목 내용3내용4 그룹 선택자 여러 선택자를 그룹으로 묶어 한번에 적용할 수 있다. 각 선택자는 콤마(,)로 구분함. 세상의 음식 추천 음식 무엇을 먹을까 된장찌개 미역줄기 아이디 선택자 태그의 id 속성을 이용하여 특정 영역 하나를 선택하여 꾸밀 때 사용함. 테마가든 안내 복잡한 도심에서 여유로운 휴식을 즐길 수 있는 나만의 공간 사랑하는 연인과 가족, 친구와 함께 즐기자 관람 안내 - 이용료 : 무료 - 이용시간 : 09:00 ~ 10:00 클래스 선택자 웹 페이지에서 두군데 이상의 특정 영역을 선택하여 ..

HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서 이런 박스를 기반으로 요소를 화면에 배치할 수 있다. 박스 모델은 Border, Margin, Padding 세가지로 구성된다. 박스 모델 p { margin: 50px; padding: 30px; border: solid 2px black; } 웹 페이지 내용 HTML 요소: 텍스트, 이미지, 동영상, 목록 등 웹 페이지를 구성하고 있는 요소. margin: 경계선과 외부의 간격을 의미. padding: 경계선과 HTML 요소 사이의 간격을 의미. border: HTML 요소의 경계선을 그리는데 사용. 경계선 => border 속성 박스 모델1 박스 모델2 박스 모델3 박스 모델4 border 속성은 선의 종류, 두께, 색상을 속..