본문 바로가기

Front

 (46)
[HTML] 사용자 입력 데이터 유형 (input type, label ) HTML에서는 다양한 타입의 form형태를 통해 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다. input유형은 닫는 태그가 없으며 type, value, name속성이 있다. type : input 태그의 유형 vlaue : 사용자 세팅 초기값 id(name) : 서버에 전송될 input요소의 이름이며 이 요소가 있어야 브라우저가 해당 요소를 인식할 수 있다. input 유형 종류(input-type) 대표적인 HTML input type은 다음과 같다. 1.Text / 텍스트로 입력받을 수 있음 2.Radio / 단일 선택 체크박스 3.Checkbox / 다중 선택 체크박스 4.Submit / 폼 양식을 서버에 전송 5.Button / 버튼 6.Reset / 폼 초기화 7.File / ..
[CSS] 디스플레이 속성 (inline, block, inline-block) 박스가 화면의 표시되는 방식을 바꾸어준다. inline속성의 박스를 block처럼 출력되게 할 수 있거나 그 반대로도 가능하다. 하지만 span태그를 block요소로 출력 방식을 바꿔주어도 inline요소인 span안에 block요소가 삽입될 수 있지는 않다. (출력형식을 바꾸는거지 성질을 바꾸는것은 아님) div{ display:block; width:100px; height:100px; border:1px solid red; } block요소의 박스들은 서로 한줄씩을 차지하여 쌓이게 된다. inline으로 출력한 박스들은 서로 내용물까지의 크기만 차지하게 된다. inline-block으로 출력한 박스들은 block의 출력성질을 가지지만 줄을 차지하지 않아서 옆으로 쌓이게 된다. .test{ displ..
[CSS] 블록요소의 CSS 패딩과 마진, (블록의 여백/Padding, Margin) 패딩이란 padding 속성은 박스모델의 콘텐츠 주위 공간(여백)을 생성하는데 사용된다. 이 명령어를 입력하게 되면 아래와 같이 상하좌우에 70px간격으로 여백(공간)이 생성된다. CSS를 이용하여 네 방향 값을 제어할 수 있다. 속성 padding-top padding-right padding-bottom padding-left 이렇게 값을 입력하면 위 예제와 같이 여백이 생성되어 출력된다. 축약표현 4개의 padding 프로퍼티를 합쳐서 축약표현으로 사용할 수 있다. 축약표현1 padding: 25px 50px 75px 100px; 순서대로 상단 패딩 : 25px 우단 패딩 : 50px 하단 패딩 : 75px 좌단 패딩 : 100px 라는 뜻을 가지고 있다. 축약표현2 padding: 25px 50p..
[CSS] 마진상쇄현상(Margin Collapse) Margin은 Padding과 모든 명령어가 동일하여 사용방법이 같지만 차이점으로는 Margin에는 Margin Collapse라는것이 있다. 마진상쇄(Margin Collapse) 두 블록인 박스가 세로로 인접해있을 때 발생하며 마진 겹침 현상, 마진 상쇄 현상 등 으로 불린다. (좌우로 있을 때는 발생하지 않음) 예시 margin값을 0을 준 두 요소가 있다. 박스 h1에 margin-bottom 값 50px을 주어 여백을 만들었다. 상단 박스에 하단50px값을 주었고, 하단 박스에 상단30px값을 주었다. 상식적으로는 여백 50px과 30px값을 주어 서로 부딪혀 80px값의 여백이 생겨야 하지만 출력 값에는 그대로 50px의 여백만 남아있다. 이 현상을 Margin Collapse (마진 겹침현상..
[CSS]박스 모델 (Box Model, box-sizing) 모든 HTML 요소는 박스로 생각할 수 있다. CSS에서 "박스 모델"은 디자인과 레이아웃을 말할 때 사용된다. Margin : 바깥 여백 Border : 테두리 Padding : 안쪽 여백 Content : Text, image, video 박스 모델은 이과 같이 구성되어 있다. CSS요소의 크기를 정하고 싶으면 콘텐츠 영역의 width, height값만 조절하면 되지만 요소의 전체 크기를 설정하려면 패딩, 테두리 및 여백도 설정해야 한다. box-sizing div{ box-sizing:border-box } content-box 기본값 border-box 패딩, 테두리도 크기 폭에 포함시킴
[CSS]박스 요소 가운데 및 중앙 정렬해보기 flex 속성 쓰지않고 가운데정렬해보기 1. 요소의 크기 값이 pixel 단위일 때1-1. 요소 생성.test{ width:200px; height:100px; border:5px solid red; }일단 만들고자 하는 크기의 요소를 생성한다.난 여기서 width:200px / height:100px 값을 주었다. 1-2. position:absolute 속성 추가.test{ width:200px; height:100px; border:5px solid red; position:absolute; }화면 크기를 기준으로 정렬을 할 것이기 때문에 absolute값을 주어야 한다. 1-3. 공식 50% - (크기/2 + padding + border + margin);.test{ width:200px; he..
[CSS] 높이와 너비 (width, height) CSS 높이 너비 값 height: 200px; width: 200px; width와 height 프로퍼티는 각각 너비와 높이값을 정할 수 있다. 값은 px단위 혹은 % 단위로 줄 수 있다. 200px값을 준 출력값이다. 화면의 가로세로 200px씩 차지한다. width값에 50%를 주었다. 언뜻 보면 같아 보이지만 % 값을 주면 출력 화면에서 값 비율만큼 화면을 차지한다. 그래서 화면을 늘려보면 값을 바꾸지 않아도 늘린 화면만큼 출력된 박스가 함께 크기가 변한다 특정 요소 안에 요소 하나를 더 집어넣어보자(부모-자식요소) 자식 요소에 % 값을 주면 부모 요소를 기준으로 자리를 차지하게 된다. 이 때 부모값을 바꾸면 %로 설정한 자식의 출력물도 함께 변경됨 크기 설정값에는 auto값도 들어갈 수 있다. ..
[CSS] CSS 테두리 (border) CSS 요소(박스)에 테두리를 칠 수 있다. 예시 p { border: 5px solid red; } 결과 기본 표현방식 (width, style, color 다 나누어 작성) p{ border-width:5px; border-style:solid border-color:red; } 축약 표현방식 (한줄로 작성/ 두께, 실선, 색상) p { border: 5px solid red; } 가로 25px, 세로 10px, 우단 4px, 좌단 35px 이와 같이 영역을 나누어서 값을 줄 수도 있다. border-left:5px solid red; border-right:5px solid red; border속성에 left, right, top, bottom 등 방향을 붙여주어 원하는 대로 표현할 수도 있다. 스..

티스토리툴바