개발자연습노트

설명하다  저쩌구HTML 문서의 기본 템플릿은 꼭 head와 body 태그를 포함해야합니다.head태그는 사이트 내에서 눈에는 보이지 않는 중요한 정보들이 들어갈 수 있는데head태그 내에서 쓸 수 있는 중요한 태그들을 몇개 나열해보겠습니다.    1. 각종 CSS 파일들  CSS 파일들을 첨부할 때 링크태그를 집어넣을 수 있습니다.위 경로는 현 HTML 파일과 같은 위치에 있는 css폴더 안에 있는 main.css 파일을 첨부하라고 되어있네요.1. css/main.css2. /css/main.css참고로 위 두개의 경로는 다른 경로입니다.1번은 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미하고2번은 현재 사이트의 메인경로 (codingapple.com)부터 시..

Flexbox 레이아웃 사용법설명하다  설명하다 .flex-container { display : flex;}.box { width : 100px; height : 100px; background : grey; margin : 5px;}그냥 박스들을 감싸는 부모 요소에게 display : flex를 사용하면 됩니다. 그럼 박스들이 기본적으로 가로정렬로 배치됩니다. (참고) 인터넷 익스플로러 11 이상에서 사용가능한 속성입니다.11미만에선 flex 그런거 없다고 에러납니다.     Flexbox 세부속성 사용하기 설명하다 .flex-container { display : flex; justify-content : center; /* 좌우정렬 */ align-items : cente..

폰트 패밀리 설정법 body { font-family : 'gulim', 'gothic'}- 버그없이 사용하려면 폰트의 영문명을 사용하셔야합니다.- 폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는게 좋습니다.- 폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용합니다. 실패하면 뒤에 있는 폰트들을 차례로 적용합니다.- 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용할 수 있습니다.     사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하려면 설명하다 @font-face { font-family : '이쁜폰트'; src : url(nanumsquare.ttf)}CSS파일 최상단에 @font-face 라는 명령어를 넣고,url() 안에 적용할 폰트의 경로와 이름을 적어줍시다.저..

상태에 따라서 스타일을 줄 수 있는 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 문서는 위의 코드를..