Simple Is Best

오늘의 포스팅은 User의 Input을 받아들이는 태그에 대해 진행하겠습니다. ● : form 태그는 제출용을 위해서 사용하며 action 속성을 갖는다. 제출하면 해당 주소에 정보를 전달해 처리한다. (JS때 자세히!) ● : 속성이 굉장히 다양합니다. 또한 input 태그는 닫는 태그가 존재하지 않습니다. input의 속성 1. type : 역할은 생각하시는 그대로 입니다. 2. placeholder : 아래의 사진과 같이 사용자가 입력할 요소에 대한 힌트를 주는 음영처리된 글자입니다. 3. value : 실제로 들어가 있는 값을 지정 할 수 있습니다. 4. name : 기능개발을 위해서 input의 이름을 지정할 수 있습니다. 참고 [CSS Selector] input의 type들을 선택하여 동일한..

보호되어 있는 글입니다.

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 ☞ 사이트 상단에 ..

보호되어 있는 글입니다.