Simple Is Best

body { margin : 0px; } 여러분들 혹시 스타일링하면서 한가지 이상한 점 못느끼셨나요? 왼쪽과 위쪽에 자동으로 마진이 1px 정도 존재합니다. 이걸 해결하려면 어떻게 해야할까요? body 태그에 margin 을 0px 을 주면 됩니다. body { /* 맨 위와 왼쪽의 살짝 띄워진 마진을 없애기 위한 body의 기본값을 조정 */ margin : 0px; } body에 margin을 0px을 적용하고 나니, 위/왼쪽이 공백이 사라진 것을 알 수 있습니다. 이 코드는 CSS 파일의 맨 위에 작성해주면 됩니다. 이런 코드들을 CSS Nomalize/ Reset 이라고 합니다. 하나만 더 알아볼까요? div { box-sizing : border-box; } 두 div 박스는 동일한 클래스 즉,..

이번 포스팅은 짤막하게 Tip 형식으로 진행 하겠습니다. 기본적으로 반응형 웹을 만들때는 인터넷 창의 Size가 줄어듦과 늘어남에 대해서 고려를 해야합니다. 현재까지 공부한 바에 의하면 [반응형 웹]을 만드는 방법은 width 를 px 단위가 아닌 상위 태그의 %를 줘서 변화에 유동적으로 대응하게 하는 것 입니다. 아직 반응형 웹을 제대로 만들어 보지는 못했지만, 몇 가지 Tip 이 생겨서 본 글을 작성합니다. max-width : 최대 가로 폭을 결정 min-width : 최소 가로 폭을 결정 width를 설정 후, 해당 속성을 활용하면 창의 길이를 늘리거나 줄였을 때, 내가 원하는 박스 혹은 요소를 깨지지 않게 설정 할 수 있습니다.

이번 포스팅에서는 Position에 대해서 알아보겠습니다. Position이란? - CSS에서 좌표 속성을 이용하기 위한 문법 - position 속성을 활용하면 요소가 붕~ 뜬다. (겹치지 않고 위에 영역을 차지) 좌표 속성 1. 기준점 2. top/bottom/left/right 기준점 (position) - static (default 값) : 좌표 속성 사용 불가, 안먹힘 - relative : 내 원래 있는 위치를 기준으로 좌표를 변경 - fixed : 화면이 기준점 ☞ 스크롤을 해도 화면에 착 달라붙어서 움직이지 않음 - absolute : 부모가 기준점 ☞ 부모 태그 중 position : relative인 값을 기준으로 달라붙어서 움직인다. ☞ 그림 위에 글씨를 겹칠 때 사용 ★ 다른 Po..

안녕하세요 ^^ 이전의 Nav 바 만드는 포스팅을 마무리 짓고 이제 새로운 결과물을 제작해보려 합니다. 웹페이지에 들어가면 요즘 웹페이지 대문 들이 많이 보이는데요! 이번 포스팅부터는 웹페이지 대문 제작을 해보면서 Background를 어떻게 다루는지 알아보도록 하겠습니다! 오늘의 Target HTML 백두산 여행 관광 예약 멀다고만 느꼈던 백두산을 갈 수 있는 초특가 DB투어! 다같이 백두산에 가보실까요? 예약 CSS 이전 포스팅과는 다르게 어떻게 적용하면 될 지 하나씩 알아보겠습니다. 첫번째로, BackGround 입니다. ● BackGround .main-background { width : 100%; height : 1000px; background-image: url(../이미지파일/백두산여행2..

오늘은 Navigation Bar를 만들어 보겠습니다! Bootstrap 등을 활용하여 쉽게 제작이 가능하지만 HTML/CSS 를 활용하여 먼저 어떻게 만들어지는지 알아보겠습니다. NavBar 란? 무료 백과 사전, 위키피디아에서 내비게이션으로 이동검색으로 이동 네비게이션 바 (또는 네비게이션 시스템은 )는의 한 부분이다 그래픽 사용자 인터페이스 정보를 액세스하는 원조 방문자 의도. 탐색 모음은 파일 브라우저 , 웹 브라우저 및 일부 웹 사이트의 디자인 요소로 구현 됩니다. [1] 네 저도 무슨 소린지 모르겠습니다. 웹사이트 들어가면 상단에 나와있는 메뉴바를 Navbar라고 칭합니다. 지난번 [실습1-블로그 글목록] 만들기의 윗부분에 NavBar를 추가해보겠습니다. 오늘의 Target ☞ 사이트 상단에 ..

보호되어 있는 글입니다.

이전 포스팅에서는 레이아웃을 위해서 float : left를 사용하였다. 본 포스팅에서는 modern-web에 더욱 적합한 display : inline-block; 에 대해서 알아보겠다. display : inline-block ▶ inline (글자 특성) + block (박스 특성) 을 동시에 갖는다. 1. inline-block 을 설정하게 되면 left 영역 오른쪽에 right 영역이 글자처럼 착 달라붙는다. 2. inline-block 은 글자특성을 가지기 때문에 space bar 혹은 enter에 매우 민감 HTML ▶ display: inline-block 은 공백에 민감하기 때문에 태그가 띄워지고 width가 부모 태그보다 넘어가면 다음 칸으로 넘어간다. ▶ 따라서, left 와 righ..

본격적인 웹사이트 화면 구축을 위한 단계이다. 웹사이트에 들어가게 되면 다음과 같은 모양의 사이트를 더러 볼 수 있다. 맨위 : Header 왼쪽 : Side Bar (left) 오른쪽 : Main (right) 맨 아래 : Footer 다음과 같은 레이아웃을 만들기 위해서는 여러가지 방법이 존재한다. 본 포스팅에서는 float을 다룬다. HTML 여러가지 박스(div)를 만들기 전, 모든 div태그를 감쌀 수 있는 container 혹은 wrap이 필요하다. CSS .container { /* 가장 부모 태그, 모든 태그를 포함한다. */ width : 800px; } .header { width : 100%; /* 부모 박스로 부터 100% */ height : 50px; background-colo..