YoonStudyNote

/*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..

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

웹 표준 검사하기 우리가 작성한 HTML 문서가 표준에 부합하는지 테스트를 해볼 수 있습니다. W3C validator에 접속하여 작성한 HTML 문서를 업로드하고 테스트를 시작하세요! 기본적인 표준 여부를 판단할 수 있습니다. 특히 입문자라면 익숙해질 때까지는 자주 확인하는 것이 좋습니다. 위에서 라고 작성했을 때 나오는 결과입니다. HTML 문서를 작성하면서 지켜야하는 이러한 규칙들이 많이 있습니다. 테스트 통과가 웹 표준/웹 접근성의 준수 여부를 최종적으로 결정하진 않습니다. 이 테스트는 사실 기본 문법 검사에 가깝습니다. 또는 사이트(페이지) 주소로 검사할 수도 있습니다. 다음은 naver.com을 검사한 결과입니다.

안에서 사용하는 태그들은 HTML 문서의 구조를 나타낸다. DIV(막쓰는 태그) 는 division의 약자로 분할을 뜻하고 문서의 부분이나 섹션을 정의한다. 명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위 묶는 wrap 용도로 사용한다. 보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게 된다. cf.막사용된다는것이 부정적인것보다 긍정적인 의미에 더 가깝다. 그래서 다양하게 사용할 수 있고, 의미가 없는곳 조차도 사용할 수 있기 때문에 모양을 만들어내는데 굉장히 특화되어서 사용 될 수 있다. 아무렇게나 묶고 묶음을 어떠한형태로도 만들 수 있기 때문에 JS나 CSS로 제어하는 용도로 사용이 된다. //소스코드 예시. div는 div를 감쌀수 있다. 이렇게 어떠한 형태로도 다 사용이 가능..

HTML 문서의 범위 문서의 구조 //문서의 시작이 어디고 끝이 어딘지 표현한다. //정보를 바탕으로 실제로 화면에 출력할 구조들은 (이미지, 동영상, 글자 등) 이 영역안에 넣는다. LINK(CSS 불러오기) 외부 문서(css)를 연결할 때 사용한다. 특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)을 불러와 연결할 때 사용한다. 빈(empty) 태그이다. 속성 의미 값 rel (필수) 현재 문서와 외부 문서와의 관계를 지정 stylesheet, icon 등... href 외부 문서의 위치를 지정 경로 STYLE(CSS 작성하기) CSS를 외부 문서에서 작성하고 연결하는 것이 아니고 HTML 문서 내부에 작성할 떄 사용한다. CSS는 무조건 style라는 태그 안에 작성해야한다. SCRI..

태그는 각자의 의미를 가지고 있다. ex. h1 = 제목 p = paragraph 문단 img = 이미지를 삽입할 때 사용하는 태그이다. div = 분할 속성(Attributes)과 값(Value) 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. 부모와 자식 요소 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다. 과일 목록 사과 딸기 오렌지 바나나

* JPG는 압축률이 훌륭해 사진이나 예술 반야에 많이 사용된다. 손실압축 (원본이 있을때 다시 jpg로 압축해서 파일을 저장하는것을 추천하지않는다. 즉 여러번 원본을 저장하는걸 피하는것이 좋다.) 그대신 용량이 적게 든다. 표현 색상도(24비트, 약 1600만개 색상) 뛰어나 고해상도 표시장치에 적합 이미지의 품질과 용량을 쉽게 조절 가능 가장 널리 쓰이는 이미지 포맷 ====> 높은 압축률(적은 용량)! * PNG는 GIF의 대체 포맷으로 개발 되었다. 비손실 압축 (손실이 없는 대신에 용량이 적게 들지는 않는 단점이 있다.) 8비트(256 색상) / 24비트(약 1600만개 색상) 컬러 이미지 처리 Alpha Channel 지원(투명도) W3C 권장 포맷 ====> 투명도 지원! * GIF는 이미지..

이미지(그래픽)은 크게 비트맵과 백터로 구분이 된다. 비트맵(bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부른다. 픽셀단위로 화면에 렌더링한다. 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식이다. 그림판, 포토샵과 같은 툴로 편집할수 있다. ex) jpg, png, gif, webp 백터(Vector)는 수학적 정보의 형태(shape)들이 만들어내는 결과물이다. 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링한다. 따라서 좀더 많은 연산을 해야하지만, 대신 해상도(픽셀)에 영향을 비트맵 이미지와 달리 해상도로부터 자유롭게 렌더링할 수 있다. 쉽게 말하면 확대 및 축소를 해도 이미지가 깨..

"Ctrl + B" 사이드바 열기/닫기 "Ctrl + P" 빠른 열기(파일이나 기호 탐색) "Ctrl + Shift + P" 모든 명령 표시(에디터의 모든 명령에 접근) "Ctrl + F" 찾기(검색) "Ctrl + H" 찾기(검색) / 바꾸기(대체) "Alt + Up" 줄 위로 이동 "Alt + Down" 줄 아래로 이동 "Shift + Alt + UpArrow" 위에 줄 복사 "Shift + Alt + DownArrow" 아래 줄 복사 "Tab" 들여쓰기