본문 바로가기

분류 전체보기

 (117)
#7 - HTML 태그 - 컨텐츠 구분 컨텐츠 구분에 사용되는 태그 아래 태그는 body내 위치합니다. 태그 예시 헤더 내 텍스트 영역 네비게이션 영역 메인 영역 아티클 영역 제목1 섹션 영역 사이드 영역 푸터 내 텍스트 영역 010-1234-5678 태그 설명 태그 의미 header 문서의 헤더를 지칭. GNB 영역을 제작할 시 사용 nav 문서의 부분 중 네비게이션(현재 페이지 내, 또는 다른 페이지로의 링크)를 보여주는 구획 div division의 약자. 의미 없이 범위를 묶는 용도로 사용함 main 문서의 주요 컨텐츠를 지칭. 한 문서에 하나의 태그만 허용 article 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 section HTML 문서의 독립적인 구획을 나타냄. 더 적합..
#6 - HTML 태그 -head 인라인/블록 요소 블록 요소 설명 : 가로 사이즈를 지정하지 않아도 가로 사이즈 100%를 차지하는 요소 특징 : 크기 지정 가능 배치 : 위에서 아래 블록 요소 -> 인라인 요소로 변경 아래 속성과 값을 css에 추가하여 사용 display:inline; 인라인 요소 설명 : 필요한 가로 사이즈만 차지하는 요소 특징 : 크기 지정 불가능 배치 : 좌측에서 우측 특징 : 위아래 패딩/마진 적용 불가능 인라인 요소 -> 블록 요소로 변경 아래 속성과 값을 css에 추가하여 사용 display:block; 최상단 또는 head 구역 내부에 사용되는 태그 태그 예시 이 부분에 구조를 작성해보자 태그 설명 위치 태그 속성 의미 값 최상단 !DOCTYPE html HTML5 문서임을 명시 html 문서의 범위 표..
#5 - HTML 작성 준비 HTML 작성 준비 폴더 열기 익스플로러(빨간 동그라미)를 클릭한다. 그 후 폴더 열기를 클릭해서 HTML을 작성할 폴더를 지정해준다. 파일 생성 초록 동그라미를 클릭하여 파일을 생성해준다. 나중에 도메인을 연결하면 다른 사람들도 내가 만든 사이트로 이동할 수 있게 되는데, 이때 경로에 있는 "index.html"파일을 가장 먼저 띄워준다고 한다. 자동완성 이용하기 "index.html" 문서에 "!"를 입력하고, 엔터를 치면 아래와 같이 기본 html 형식이 자동 완성된다. 추가 정보 작성하기 HTML에 구조를 작성하기 전, 아래와 같이 자신에게 맞는 정보를 입력하자. 이 부분에 구조를 작성해보자 추가 정보 입력을 위한 태그 설명 각 태그에서 사용할 수 있는 속성은 다음 글에서 설명한다. 태그 내용 !..
#4 - CSS 기본 문법 CSS 기본 문법 기본 형태 body{ background-color:red; color :white; } CSS 문법에서 선택자(body)를 입력하고, 그에 대한 속성자 (background-colod)와 값(red)을 설정한다. 여기서 선택자는 html에서의 요소를 말한다. 요소 선택 콘텐츠 텍스트 클래스는 동일 값을 여러군데 사용 가능 콘텐츠 텍스트 HTML 요소를 CSS의 속성자로 선택할 수 있다. 태그 명으로 찾기 /*--CSS--*/ p{ color : white; } 선택자에 태그명을 입력하여 선택한다. Class로 찾기 /*--CSS--*/ .contents-text{ color : white; } Class라는 속성자로 HTML에서 요소로 지정할 수 있으며, 이를 선택자로 지정할 수 있다..
#3 - HTML 기본 문법 가장 기본적인 HTML의 문법을 알아보자 HTML 기본 문법 기본 형태 내용 HTML 문법에서 대부분의 요소들은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어간다. 빈 태그 종종 종료 태그가 없는 형태를 볼 수 있는데, 이는 빈 태그라고 지칭한다. 속성/값 태그를 활용도 있게 사용하기 위해 속성과 값을 사용한다. 위의 의미는 아래와 같다. img : image를 삽입해라. (속성) src : source의 경로는 "파일이 있는 위치 > img > logo.png"이다. (값) alt : 이미지가 표시되지 않을 경우, "로고" 텍스트를 노출시켜라. 부모/자식 요소 태그 안에 태그를 감싸서 사용할 수 있다. 이때 상위에 있는 요소를 부모 요소라고 칭하고, 안에 있는 요소를 자식 요소라고 칭한다. ..
#2 - VS Code 사용법 VS Code는 Visual Studio Code의 약자로, 오픈소스 웹 에디터이다. 이전에는 Sublime Text를 썼지만, 요즘 VS Code를 많이 사용한다고 하여 VS Code를 설치하고 사용해보려 한다. 기본 환경 셋팅 VS Code 설치 아래 사이트에서 운영체제에 맞는 버전을 설치한다. #VS Code code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and ..
#1 - 배경 지식 쌓기 웹을 구성하기 위해 필요한 것 HTML HTML은 Hyper Text Markup Language의 약자이다. HTML은 제목, 단락, 목록 등을 정의할 수 있다. 그 밖의 여러 항목들을 구조적으로 만들 수 있는 방법을 제공한다. CSS CSS는 Cascading Style Sheets의 약자이다. HTML / XHTML의 요소를 지정하고 레이아웃과 스타일을 정의할 때 사용한다. JS JS는 JavaScript의 약자이다. Java와는 명칭만 비슷하고 다른 언어다. HTML / XHTML의 요소를 바꾸고 움직이는 등 페이지가 움직일 수 있도록 꾸며주는 역할을 한다. 웹 제작을 위해 알아야 할 규칙 웹 표준 웹 표준은 W3C(World Wide Web Consortium)을 따른다. 웹에서 사용되는 공식 ..
#0 - 프롤로그 디자인을 하면서 개발자와의 소통이 매우 중요하다는 것을 알고, 3-4년 전에 국비지원을 통해 HTML, CSS, JS를 조금 배웠다. 그리고 작년.. 동료 개발자에게 내가 배운 지식이 90년대 스타일인 것을 알고 충격을 받고, 웹 기초 지식을 다시 쌓아야겠다고 생각했다.

티스토리툴바