YoonStudyNote

1. Tag, Link header = 헤더 - 로고, 메뉴 //영역을 사용하기 때문에 블럭요소이다 footer = 푸터 - 주소, 사업자... //영역을 사용하기 때문에 블럭요소이다 main = 메인 - 핵심 //영역을 사용하기 때문에 블럭요소이다 article = 아티클 - 독립, 재사용 //영역을 사용하기 때문에 블럭요소이다 seciton = 영역 설정 - 영역, 제목(h1~h6) vs div = 영역설정 - 아무의미 없음 //영역을 사용하기 때문에 블럭요소이다 aside = 옆부분 - 광고 //영역을 사용하기 때문에 블럭요소이다 nav = 다른페이지 링크 제공 - Home, About, Contact (목차, 색인 등을 설정) //영역을 사용하기 때문에 블럭요소이다 address = 연락처 정보 ..

1. charset EUC-KR UTF-8 완성형 조합형 홍 길 동 각각 글자를 찾아서 출력하기 때문에 만약 존재하지 않는 한글이 있다면 깨져서 출력된다. ㅎ ㅗ ㅇ ㄱ ㅣ ㄹ... 등등 이런식으로 단어를 찾고 조합해서 출력하기 때문에 조합할수있는 경우의 수만 존재한다면 거의 대부분의 문장을 만들 수 있다. 오래된 사이트에서 볼 수 있는 인코딩 방식 요즘 많이 사용하는 인코딩 방식 2. content 이 속성은 name 속성 중 어떤 것이 사용되느냐에 따라 해당 속성의 값을 갖는다. author 문서의 작성자를 정의한다. description 페이지의 내용에 대한 짧고 정확한 요약을 담고 있다. Firefoxs나 오페라와 같은 여러 브라우저에서는 이를 즐겨 찾기 페이지의 기본 설명으로 사용한다. gene..

/*html문서 밖에 있는 내용을 웹 브라우저나 검색엔진은 문서의 내용이라고 해석하지않는다.*/ //document 타입을 지정해야지 정상적으로 작동할 수 있다. 문서의 구조

1. 블록 요소 1. DIV, H1, P 2. 사용 가능한 최대 가로 너비를 사용한다. -->다음과 같이 가로 너비를 설정하지 않아도 왼쪽부터 오른쪽 끝까지 빨간색으로 채워진걸 볼 수 있다. body{ margin : 0; padding : 0; } div{ background : red; height : 20px; } 3. 크기를 지정할 수 있다. -->크기가 지정해준만큼 커진다. body{ margin : 0; padding : 0; } div{ background : red; width : 200px; height : 150px; } 4. (width : 100%; height : 0; 으로 시작) 5.수직으로 쌓임 6.margin, padding 위,아래, 좌, 우 사용 가능하다. 7.레이아웃 c..

HTML 코드 Personal Open Source Business Explore CSS코드 body{ margin : 0; padding : 0; } .header{ background: white; border-bottom: 1px solid lightgray; /*1픽셀 두깨의 가늘한 실선을 밝은회색으로 하겠다*/ } .container{ width : 980px; margin : auto; } .container-left{ /*위아래는 20 좌우는0으로 정한다. 최상위 버전에서보다 하위버전에서 조절하는것이 좋다*/ padding-top : 20px; padding-bottom : 20px; } .logo{ float : left; margin-right: 10px; } .logo img { dis..

1. width(가로너비) 요소의 가로 너비를 지정한다. 단위는 px을 사용한다. 2. height(세로너비) 요소의 세로 너비를 지정한다. 단위는 px을 사용한다. 3. font-size(글자크기) 요소 내용(Text)의 글자 크기를 지정한다. 만약에 글자 크기를 지정하지 않았다면, 대부분 기본값이 16px로 되어있다. .box{ width : 300px; height : 200px; background : red; font-size : 30px; } 1. margin(요소의 바깥 여백) 요소의 바깐 여백을 지정한다. 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용한다. div{ margin : 10px; } 위 코드는 margin은 요소의 위, 아래, 좌, 우 모두 10px의 여..

선택자는 HTML의 특정한 요소를 선택하는 사인(sign)이다. 1. 태그로 찾기 선택자를 입력하는 부분에 적용하려는(찾으려는) 태그의 이름을 입력한다. h1{ color : red; } p{ color : blue; } 선택자를 작성하는곳에 아무런 기호 없이 우리가 알고 있는 태그의 이름만 작성하는것을 통해서 "태그들"을 찾을 수 있다. 하지만 문제는 예를들어 수많은 div가 있는데 우리가 원하는 특정 일부 div를 찾아내는데 무리가 있다. 2. 클래스로 찾기 좀 더 명확하게 원하는 요소를 찾기 위해서 '클래스 선택자'라는 것이 존재한다. .title{ color : red; } .main-text { color : blue; } "."은 클래스 선택자라고 한다. title이라는 태그를 찾는것이 아니라..

1. 태그에 직접 작성하기(인라인) 이방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않는다. 태그에 직접 작성1 단점으로는 우리가 직접 찾아서 값을 넣어줘야하는데 만약 넣어줘야하는 값이 많아지면 곤란해진다. 그래서 최대한 피해야한다. 그리고 수정하는데에도 굉장히 비효율적이다. 그렇다고헤서 이것 자체는 나쁜 방식은 아니다. 2.HTML에 포함하기(내장) --> embeded방식 CSS만 따로 작성하기 때문에 선택자가 필요하다. CSS코드가 HTML의 안에 포함되어 있다. (style태그는 head태그안에 설정을하는 속성이다.) HTML에 포함1 HTML에 포함2 HTML에 포함3 3. HTML 외부에서 불러오기 (link) 외부에서 문서를 가져오는 방식이다. CSS 코드를 완전히 분리할 수..

속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용한다. div{ color : red; //글자색은 빨강 font-size : 20px; // 글자 크기는 20px width : 300px; // 가로 너비는 300px margin: 20px; // 바깥 여백은 20px padding : 10px 20px; //안쪽 여백은 위아래 px, 좌우 20px position : absolute; //위치는 부모 요소 기준. }

선택자는 HTML에 스타일(CSS)을 적용하기 위해서 HTML의 특정한 요소를 선택하는 사인(sign)이다. "빨간 글자색 (CSS, color : red;) 을 저기 제목 (HTML, 에 적용하겠어!)", "파랑 글자색(CSS, color:blue;)은 여기 본문(HTML, 에 적용하겠어!)"와 같이 적용할 스타일을 속성과 값으로 나타내고 적용할 대상(H1,P)을 선택자로 나타낸다. h1{ //선택자 color : red; } p{ //태그 color : blue; }