개발자연습노트

상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터설명하다 .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/}.btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/}.btn:active { background : brown; /*클릭 중일 때*/}pseudo-class 셀렉터를 붙이시면 여러 상태에 따른 스타일을 지정해줄 수 있습니다.hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작합니다.1. hover2. focus3. active입니다. hofa로 외우면 잘외워지겠군요 이거 말고도 수많은 pseudo-class가 있기 때문에 필요하면 찾아쓰도록 합시다.    ..

기본적인 table HTML 구성 설명하다  내용 내용 table태그 내에 tr은 row, td는 column을 의미합니다. 내가 원하는 만큼 row, column을 넣어주면 표가 완성됩니다. tbody, thead는 그냥 헤드부분 영역구분을 위해 사용하며 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리됩니다.     테이블 셀 내에서 상하정렬할 땐 vertical-align td, th { vertical-align : middle;}vertical-align 속성을 이용해 테이블 내에서의 상하정렬을 하실 수 있습니다.top, bottom, middle 사용가능     inline 요소 간 상하정렬할 땐 vertical-align  Greeti..

form 레이아웃 제작시에도 포인트는 div박스입니다. 뭘 만들든 일단 예시 디자인 위에 박스부터 그려놓고그걸 그대로 div 박스로 구현만 하면 쉽게 레이아웃 만들 수 있습니다.div 박스부터 배치하고 그 안에 글넣고 그림넣고 input 넣고 그러시면 됩니다.    저는 박스 디자인을 이렇게 해놨습니다. 설명하다  가로로 꽉찬 input들은 w-100 이라는 div에 싸매고,가로로 반반 차지할 input들은 w-50 이라는 div에 싸맸습니다그리고 w-100은 width : 100%w-50은 width : 50%; float : left 이렇게 주었다고 합니다. float 주면 당연히 어딘가에 clear : both 도 있어야겠군요      태그 디..

form은 form 태그로 만들어냅니다.  input태그는 닫지 않습니다.      input의 type 설명하다  옵션110개는 더 있지만 가장 자주 쓰는 것만 모아봤습니다. 나머지는 필요할 때 구글에 찾아쓰도록 합시다.     input에 넣는 속성들 placeholder는 배경 글자,value는 미리 입력된 값,name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능합니다.   HTML의 속성으로 CSS셀렉터를 사용할 수 있습니다. input[type=email] { color : grey}input의 type속성이 email인 요소만 찾아서 스타일을 줄 수 있습니다. 폼에서 특히 유용하게 사용합니다.     전송버튼은  전송둘 중 하나 쓰시면 됩니다.그리고 물론 태그 안에 있어야 잘 작동..

네모 박스 디자인에 많이 사용하는 CSS 속성 설명하다 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px;}margin은 바깥 여백,padding은 안쪽 여백,border는 테두리 (차례로 두께, 선의 종류, 색상),border-radius는 테두리 둥글게 처리입니다. 가운데 정렬도 많이 하는데 저번 이미지처럼 display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다.    Q. 이렇게 많은 스타일을 다 언제 외우고 있냐고요?외워봤자 맨날 까먹기 때문에 필요하면 구글에서 찾아쓰는게 일반적입니다.      margin과 padding을..

간단한 스타일 넣는 법   글자 거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다.거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다.여러개를 넣고 싶다면 뒤에 쭉 나열해주시면 됩니다.세미콜론 까먹으면 안됩니다.   자주 사용하는 글자 스타일들 설명하다 font-size : 20px;font-family : 'gulim';color : black;letter-spacing : -1px;text-align : center;font-weight : 600;영어 단어를 잘 알고 계시면 무슨 뜻인지 바로바로 파악은 쉽습니다.   이미지 정렬과 폭 조정 설명하다 display : block;margin-left : auto;margin-right : auto;width : 150px..

HTML은 어디다 쓰는 언어? 웹페이지를 만들고 디자인하고 싶을 때 사용합니다.세상에 존재하는 모든 웹페이지는 html 언어로 작성합니다.  HTML은 Hypertext Markup Language의 약자인데 Markup Language에 주목해주시면 됩니다.마크업 언어는 "자료의 구조를 표현하기 위한 언어"입니다.웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 .. 자료를 입력하죠? 그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해 존재하는 언어가 바로 HTML이라고 보면 되겠습니다. 아무튼 여러분이 HTML 언어로 글넣고 그림넣고 하면 웹페이지가 되는 것입니다.   HTML 파일 기본 템플릿 설명하다   HTML 문서는 .html로 끝나도록 저장하시면 되며모든 HTML 문서는 위의 코드를..

배경관련 CSS 속성들 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed;}background-size는 px, % 단위도 가능하고cover는 배경으로 꽉채워주세요contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다.background-attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다.    배경 두개 겹치기 신공  .main-background { background-im..