나다이_꾸준히걷기

HTML 주석 그렇다면 화면에 출력되지 않도록 하려면 어떻게 해야할까? 주석을 사용한다 : : 수정사항이나 설명 등을 작성(주석) : 브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않음 : Ctrl + / 혹은 Cmd + /

HTML 핵심 요소 정리 태그 : : 블록(상자) 요소 : 특별한 의미가 없는 구분을 위한 요소.(Division) 태그 : : 블록(상자) 요소 : 제목을 의미하는 요소.(Heading) : h1, h2, h3, h4, h5, h6 숫자가 작을수록 더 중요한 제목을 정의 태그 : : 블록(상자) 요소 : 문장을 의미하는 요소(Paragraph) 태그 : : 이미지를 삽입하는 요소.(Image) : src, alt 필수 속성 태그 : : 블록(상자) 요소 : 순서가 필요없는 목록의 집합을 의미.(Unordered List) : 무조건 자식태그로 태그가 1개이상 존재해야함 태그 : : 블록(상자) 요소 : 목록 내 각 항목(List Item) : 무조건 부모태그로 태그와 함께 해야함 태그 : Naver :..

글자와 상자 : 요소가 화면에 출력되는 특성, 크게 2가지로 구분. 1. 인라인(Inline) 요소 : 글자를 만들기 위한 요소들. 2. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들. 태그 : : 대표적인 인라인 요소 : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. : 요소가 수평으로 쌓임 : 인라인 요소는 포함한 콘텐츠 크기만큼 자동으로 줄어듬(가로, 세로 모두) : style의 width (요소의 가로길이), height (요소의 세로길이) : span 태그에 css 속성을 설정해줘도 글자는 가로 세로 높이를 가질수 없으므로 변화하지 않는다. : style의 margin (요소의 외부 여백을 지정하는 css속성) : style의 padding (요소의 내부 여..

HTML 기본 문법 요소(Element) : 내용 : 시작태그, 요소의내용(Contents), 종료태그 ex)Hello~~ HTML 부모와 자식 관계의 이해 : 부모 요소 내용 : 자식 요소 : 부모 요소 : 들여쓰기를 통해 자식요소와 부모요소의 구분을 시각적으로 정리 들여쓰기(Indent) : Tab 내어쓰기(Outdent) : Shift + Tab 내용 : 상위(조상) 요소란 기준을 제외한 기준을 감싸고 있는 모든 요소들(바로 윗단계인 부모 요소 부터) : 하위(후손) 요소란 기준을 제외한 기준 내부에 있는 모든 요소들(바로 아랫단계인 자식 요소 부터) 빈태그 Empty태그 ex) : 편리함! HTML 1/2/3/4/5 or : 안전함! XHTML / HTML5 :되도록 슬래쉬를 붙이도록 연습하기~ ..

Emmet : VS Code의 고유한 기능은 아님 : 간단하게 tag이름만 명시해도, 요소를 자동으로 완성해줌 : 동일하게 codepen.io 에서도 사용 가능 html 에서 div + tab : div.MAKZUIN + tab : img + tab : div>ul>li*4{$} : 1 2 3 4 이하생략... css 에서 w:200 + tab : width: 200px; bc:orange + tab : background-color: orange; 이하생략... 더 자세한 내용은 css 선택자 할떄!

브라우저 스타일 초기화 reset.css cdn 다음과 같이 css 파일을 적용한 후 그런데 내가 설정하지 않은 margin이 들어가있다? 브라우저마다 다른 설정값을 가지고 있을수 있고, 이는 사용자가 보기에도, 브라우저마다 개발 의도와는 다른 화면을 보여주게 될 수도 있다. 크로스브라우징 이슈 방지를 위해 브라우저 스타일 초기화 하는 방법을 살펴보자. reset.css cdn 검색 : 브라우저의 스타일을 초기화하는 css 위처럼 검색해서 reset.css min의 html양식 주소를 복사하여 index.html의 head태그 내부에 추가해준다. 적용되면 다음과 같이 기본적으로 적용된 margin이 사라진 것을 확인할 수 있다. 그렇다면 codepen.io에서는 이를 어떻게 적용할까? css 설정부분에서..

Codepen.io 소개 https://codepen.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io : 기본적인 내용 테스트 하기 좋음 : 테스트는 가입안해도 됨 : 저장하려면 가입해야함

개발자 도구 사용하기 구글크롬 실행: F12 버튼 누르기 : html 구조와 css 구조를 분석할 수 있음 : javascript는 디테일한 분석까지는 쉽지 않음 : Elements에서 Styles 로 css가 적용된 내용들을 볼 수 있음 : Computed에서 실제로 적용된 목록으로도 내용을 볼 수 있음

VS Code 모든 파일 공백 크기 설정 매번 파일 생성할 때마다 공백 크기가 4로 설정이 된다. 생성할 때 공백 크기가 2로 설정되도록 하기 위해서는? 설정을 실행후 모든명령표시에서 설정 검색 Ctrl + Shitf + P 윈도우 Cmd + Shift + P 맥 또는 좌측 하단 톱니바퀴 모양 누르고 설정 클릭 2로 변경해주고 새로 만들기 하면 공백이 2로 모두 생성된다.

페이지 나누고 연결(링크)하기 태그 NAVER 네이버 : 태그 내부에 있는 글자에 href의 링크로 이동하도록 버튼이 생성됨 : 경로 '/' 앞에는 접근 가능한 기본 주소가 생략되어있다 About : 루트 폴더 아래의 about폴더 안에 about.html 파일이 존재하면 해당 링크로 이동 가능하다 : http://127.0.0.1:5500/about/about.html : 브라우저는 해당 경로가 폴더까지만 지정되었을 경우, index.html을 자동으로 찾아서 띄워주게된다. 예) About About2 : 두 사례 모두 같은 about 폴더 내의 index.html 화면을 보여주게 된다. Home : 루트 경로에 있는 index.html로 이동하게 된다. ※ 주소의 about이 항상 폴더라고 단정할 수..