프로그래밍 공부방

모던 웹에서 사용하는 단위.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */} media query 사용법@media screen and (max-width : 1200px) { .box { font-size : 40px; } } @media screen and (max-width : 768px) { .box { font-size : 3..

flexbox 레이아웃 사용법 .flex-container { display : flex;}.box { width : 100px; height : 100px; background : grey; margin : 5px;}div 박스들을 감싸는 부모 요소에서 display: flex 속성을 적용하면 박스들이 기본적으로 가로정렬로 배치된다. flexbox 세부속성.flex-container { display : flex; justify-content : center; /* 좌우정렬 */ align-items : center; /* 상하정렬 */ flex-direction : column; /* 세로정렬 */ flex-wrap : wrap; /* 폭이 넘치는 요소 wrap 처리 ..

상태에 따라 다른 스타일을 줄 수 있는 pseudo-class.btn:hover { background : chocolate; /*마우스를 올려놓을 때*/}.btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/}.btn:active { background : brown; /*클릭 중일 때*/} 여러 pseudo-class:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/:playing /*동영상, 음성이 재생중일 때*/:paused /*동영상, 음성이 정지시*/:autofill /*input의 자동채우기 스타일*/:disabled /*disabled된 요소 스타일*/:checked /*체크박스나 라디오버튼 체크되었을 때*/:blank /*inp..

table 태그 구성 내용 내용 table 태그 내의 tr은 row(가로 행), td는 column(세로 열)을 의미한다. td대신 th를 사용하면 글자가 굵게 처리된다.원하는 만큼 row, column을 넣으면 표가 완성된다.tbody, thead는 영역구분을 위해 사용된다. vertical-align 속성-테이블 셀 내에서 상하정렬td, th { vertical-align : middle;} -inline 요소 간 상하정렬 Greetings안녕display: inline 혹은 display: inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있다.특히, 큰 이미지와 글, 큰 글씨 옆에 있는 작은 글씨같은 요소들을 나란히 배치했을 때 ..

formhtml에서 form 태그는 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 기술 중에 하나이다. form은 사용자가 웹사이트에 데이터를 전송해주기도 하며, 입력 데이터를 사용하기 위해 form 태그를 활용할 수 있다. form 태그의 속성form 태그 속성설명method전송 방식 선택-get: 256~4096 byte 까지만 전송 가능-post: 입력 내용의 길이에 제한이 없다nameform의 이름서버로 제출된 폼 데이터를 참조하기 위해 사용actionform을 전송할 서버 쪽의 script 파일을 지정전송되는 서버 url 또는 html 링크targetaction에서 지정한 script 파일을 다른 위치에 열도록 지정autocomplete자동 완성. on으로 명시하면, 브라우저는 사용자..

div 박스 만들 때 주의점div 박스의 width를 주게 되면 padding, border를 고려하지 않는다. 따라서 padding 안쪽 부분만 실제 width로 설정한다.그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만클 늘어날 수 있다. 박스의 폭을 border까지 설정할 수 있는 속성.box { box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/ box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다(기본 설정)*/} css 파일 작성시 기본으로 쓰면 좋은 속성들div { box-sizing : border-box;}body { margin : 0;}htm..

positiontop, left, bottom, right 속성을 사용하면 요소의 상화좌우 좌표를 변경할 수 있다.하지만 이 좌표 속성을 사용하려면 position 속성이 필요하다.position 속성은 좌표속성을 적용할 기준점을 지정해주는 역할을 한다. .box { position : static; /* 좌표위치 고정(변경 불가) */ position : relative; /* 요소의 원래 위치 기준 */ position : absolute; /* 부모요소 기준(부모요소가 position: relative; 값을 가지고 있어야 함 */ position : fixed; /* 브라우저 창 기준 */} position: absolute를 적용한 요소 가운데 정렬.button { position : ..

float 속성요소를 띄워 왼쪽/오른쪽에 정렬하는 속성 .left-box { width : 100px; height : 100px; float : left;}.right-box { width : 100px; height : 100px; float : left;}위 코드는 div 박스 2개를 왼쪽으로 정렬시킨 코드하지만 float 속성을 사용할 경우, 그 요소를 띄우다보니 다음 html 요소가 자리를 제대로 찾지 못한다.때문에 float 다음에는 항상 clear 속성이 필요하다. clear .footer { clear : both}clear 속성을 사용하면 float 다음에 오는 요소들이 제자리를 찾는다. inline-block정렬할때 사용할 수 있는 속성 .left-box..

html 기본 구조  html 기본 태그글 본문글 제목링크버튼리스트리스트, , 등등을 태그라고 한다.용도에 맞는 태그를 사용하는 것이 '웹 표준'에 맞는 웹을 만들어낼 수 있다.태그 안에 href, src 같은 속성을 넣을 수 있고, 태그 안에 태그를 넣을 수 있다. 간단한 스타일 설정 글자 태그 안에 style 속성으로 간단한 스타일 설정을 할 수 있다. 자주 사용하는 스타일{/*글자 스타일 조정*/}font-size : 20px;font-family : 'gulim';color : black;letter-spacing : -1px;text-align : center;font-weight : 600;{/*이미지 스타일 조정*/}display : block;margin-left : aut..