코딩 공부/HTML,CSS

[CSS] postion,overflow,float,스타일 선언

postion -자유자재로 요소의 위치를 배치하는 속성 static : 태그가 위에서 아래로 순서대로 배치, postion의 기본 값 :정적인 top,bottom,left,right이 비활성화됨 relative : 초기 위치 상태에서 상하좌우로 위치 이동 -위치속성 활성화 -기준 : 본인이 원래 있었던 위치를 기준으로 움직임 absolute : 절대 위치 좌표를 설정 :절대적인, 제약을 받지 않는 -브라우저 크기에 따라서 다르게 설정해야하는경우 사용 -top,bottom,left,right이 활성화 -기준 : static이 아닌 부모, 없다면?body fixed : 화면을 기준으로 절대 위치 좌표 설정 :고정된 -브라우저 맨 위로 올리기,주문하기 등 사용 -부모,스크롤 전부 무시 -기준 : 최상위 태그 ..

[CSS] 단위,공간,박스

크기 단위 - 요소 or 텍스트의 크기를 지정하는 단위 속성 설명 px 화소 하나의 크기에 대응되는 단위(고정값) em 부모요소 크기에 따른 배수 단위 rem html 태그의 폰트 크기에 따라 결정 공간분할태그 경계를 분할하거나 영역을 나눌 때 사용하는 태그 div : 큰 영역 분할 p : 문단분할 span : 세부적인 스타일(시작태그와 끝태그 사이의 contents) display -요소가 화면에 보이는 방식 지정 속성 설명 block block형식으로 지정 inline inline형식으로 지정 none 화면에 보이지 않게 지정 실습 네이버 www.naver.com 다음 www.daum.net 박스 모델 - 모든 요소는 사각형으로 구성! - 요소에 부피감을 결정하는 개념 - 웹 페이지의 레이아웃 및 디..

[CSS] 선택자

CSS( Cascading Style Sheets)란? HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 선언을 해준 후 안에서 문법을 활용하여 색깔을 바꿔보자 font : 글자의 폰트를 정의하는 속성 - font-family : 글꼴(나눔고딕,굴림,돋움) - font-size : 글자크기(px,em,rem) - font-weight : 글자두께(bold, 100~900) - font-style : 글자스타일(Italic) 선택자 전체 선택자 : *로 표시되며 웹 문서 내 모든 요소 선택 태그 선택자 : 태그이름으로 표시 클래스 선택자 : 중복이 가능하고 재사용이 가능하다. -.(점)기호로 표시 -공통되는 스타일을 적용할 경우 사용 아이디 선택자 : 중복 불가능, 한 HTML문서 당 하나만 -#..

[HTML] 실습

회원 가입 폼 회원 가입 폼 응용 정답보기 step1 : 아이디 / 비번 입력 아이디: 비밀번호: 비밀번호 확인: step2 : 개인정보 성별: 남 여 혈액형: A형 B형 AB형 O형 생일: step3 : 선호도 취미: 축구 야구 농구 좋아하는 색깔: step4 : 적고 싶은 말 form은 데이터를 저장하는 필드 단위인가? -데이터를 전송할 때 하나로 묶어주는 단위 -여러개 사용 가능하다. 단,submit버튼을 한번 클릭하게 되면 페이지가 변동된다. 즉, 한번 submit을 누르면 페이지를 벗어난다. name => 중복사용 가능 id => 중복사용 불가능

[HTML]form 태그

폼(form) 태그 -데이터를 전송하기 위해서 사용하는 태그 : -데이터를 입력받을 수 있는 태그 : input태그는 반드시 type속성을 지정해 주어야 한다. -글자를 입력 받을 수 있는 input type = text -해당하는 input 태그의 값을 입력 할 때는 value를 사용 -placeholder : 미리보기 텍스트를 지정하는 속성 -autofocus : 자동 커서 설정 -maxlength : 글자 수 길이를 제한 할 수 있는 속성 -readonly : 읽기 전용 속성 name : 입력한 값을 구분짓기 위해 사용하는 속성 from 태그 속성 -action : 데이터를 가지고 이동할 링크를 지정하는 속성 -lable : input 태그를 설명해주는 태그 -id : 해당하는 페이지에서 태그를 구..

[HTML] 태그

리스트 태그 :(unordered list)번호없는 목록을 사용할 때 사용하는 태그 :(ordered list)번호있는 목록을 사용할 때 사용하는 태그 :(list item)공통적으로 사용되는 태그 이미지 태그 : 웹 페이지에 이미지를 보여주는 태그 src : 이미지의 경로 지정(파일 경로나 URL) alt : 이미지에 대한 설명(경로가 잘못되었을 경우) 절대 경로 : 어떤 페이지나 파일이 가진 고유한 경로 *외부 웹페이지로 연결할 때 사용 상대 경로 : 특정 위치를 기준으로 파일을 찾는 경로 * 내부 자료를 연결할 때 사용 텍스트 href : hypertext referenece로 연결할 주소 지정 name : 문서 내 특정 위치 이동 target : 링크된 내용이 열릴 대상 1) 표를 만들어야 겠다!..

[HTML] 기초

HTTP(Hyper Text Transfer Protocol) -인터넷에서 하이퍼텍스트(Hypertext)문서를 교환하기 위하여 사용되는 통신규약 Hyper Text -현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 웹 홈페이지에서 F12키를 눌러 개발자 도구 창을 불러올 수 있다. Markup - 어딘가에 Mark,즉 표시를 해두는것 태그 Hyper Text Markup Language -이 전체를 Element(요소)라고 칭한다. align = "center">Hello,HTML! - align을 속성(attribute) - "center"를 값(value) - DOCTYPE : 최신 HTML버전으로 문서를 만들어주는 태그 - head : 현재 html파일의 문서정보를 정의하는 공간 (첨부파일..