설계의 품격

background-color: red ; - 배경 색상 설정 background-image: url(경로) ; - 배경 이미지 설정 background-repeat: no-repeat ; - 배경 이미지 반복 설정 no-repeat 은 반복하지 않겠다라는 의미입니다. background-size: cover ; - 배경 이미지 크기 설정 contain 은 내가 만든 박스의 세로 크기에 이미지가 맞춰져서 들어간다는 의미 입니다. cover 는 내가 만든 박스의 가로 크기에 이미지가 맞춰져서 의미 입니다. background-position: center ; - 배경 이미지 위치 설정 center / right / left / px / % 를 통해 설정 가능합니다. background-attachment:..

input 태그는 닫는 태그가 없습니다. input 태그는 type 에 아무것도 쓰지 않으면 기본적으로 text 입니다. placeholder 를 추가하면 아무것도 안쓰여있을때 텍스트가 써집니다. input 의 type 중 password 는 텍스트가 안보이게 써집니다. input 의 type 중 date 는 달력을 통해 날짜를 선택할수 있습니다. input 의 type 중 radio 점 선택 입니다. input 의 type 중 checkbox v 자 선택 입니다. input 의 type 중 color 색상 선택 입니다. input 의 type 중 number 는 숫자 선택 입니다. min="1"(최소 숫자) max ="100"(최대 숫자) step="5"(올라가는 숫자 크기) 을 같이 써줍니다. tex..

form 태그는 웹 페이지에서의 입력 양식을 의미합니다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다. 웹을 처음 개발하시는 분들은 이후 백엔드 공부를 진행할 때, 태그에 대해서 다시 한번 공부함을 추천드리며 지금은 간단히 어떤 태그들이 있는지 알아보시기 바랍니다. 실제로 백엔드 코드와 함께 을 사용하기 위해서는 다음 속성들이 사용됩니다. name: 폼의 이름 action: 폼 데이터가 전송되는 백엔드 url method: 폼 전송 방식 (GET / POST) 앞으로 태그들은 form 태그 내에 넣어 위치시켜야 한다. action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다. name : 폼을 식별하기..

/* 노멀라이징 */ * { padding:0; margin:0; } ul,li{ list-style:none; } a{ color:inherit; text-decoration:none; } /* 라이브러리 */ .cell{ float:left; } .cell_r{ float:right; } .row::after{ clear:both; content: ""; display: block; }

display 속성 참고 사이트 display : block ; display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 기본 요소가 block 인 엘리먼트들 : h1~6, p , div , ul ,li display : inline ; display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. ※ inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반..

참고 사이트 float : left ; (요소들을 왼쪽으로 정리한다) float : right ; (요소들을 오른쪽으로 정리한다) float 속성을 준 부모 태그에는 무조건 아래의 속성을 주어 레이아웃이 틀어지지 않도록 한다. 기본적으로 row 라는 클래스를 만들어 넣어줌 .row::after{ clear:both; display:block; content:""; }

font-size: 24px ; font-weight: bolder ; 폰트웨이트는 기본 = normal, 100~900, bold, bolder font-family: 'Nanum Pen Script', cursive; 구글 폰트 에서 선택후 링크 걸고 변경 text-shadow: 10px 10px 10px black ;

transition 속성 - css 가 변경될때 자연스러운 애니메이션 구현 사용방법 : transition : 1s ; 변경되는 시간 설정 ex) .box {transition : 1s ;}

마우스 오버 속성 - 마우스를 올렸을때 css 변경되는것. 사용방법 : css 에서 클래스 명뒤에 :hover 라고 입력 ex) .box:hover {width: 300px;} See the Pen BapNLBe by goodmean (@goodmean) on CodePen.

background : 배경변경요소로 축약형태이다. background-color : 배경변경요소 중 배경 색상 변경요소 color : 내부 텍스트 색상 변경 width : 너비 크기요소 (가로크기) px/% 사용가능 height : 높이 크기요소 (세로크기) px/% 사용가능 padding : 내부 여백 요소 (배경 포함 o) px / % 사용가능 사용 방법 1 - padding: 0(상하좌우) ; 사용 방법 2 - padding: 10px(상하) 10px(좌우) ; 사용 방법 3 - padding-top: 10px ; 상단 여백 10px 상하좌우 다 설정 가능 margin: 외부 여백 요소 (배경 포함 x) px / % 사용가능 사용 방법 1 - margin: 0(상하좌우) ; 사용 방법 2 - ma..