색상 CSS 에서 색상을 표현하는 방법을 알아보자! color color name RGB color rgba color hex color hls color h1{ color: blue; } h2{ color: brown; } 앞선 수업에서 h1, h2 의 색상은 color 속성으로 설정하였다. h1{ color: blue; } h2{ color: brown; } h3{ color: #abcdef; } h3 는 hex 값으로 색상을 설정한다. hex 는 16진수 값으로 색상을 표현한다. 맨 앞에 샵(#)을 붙이고 6자리 값을 설정한다. 각 자리에는 0~f 까지의 16개의 값 중 하나이다. 두자리씩 끊어서 RGB 색상값을 나타낸다. 즉, 위 코드에서 ab 는 R(Red) cd 는 G(Green) ef 는 B..

작성된 HTML 코드에 CSS 스타일을 적용하는 방법은 크게 3가지가 있다. 인라인 스타일 CSS 문법 인라인 스타일은 HTML 태그 안에 직접 스타일을 설정하는 방법이다. 태그 안에 style 속성값으로 CSS 스타일 코드를 문자열 형태로 작성해주면 된다. 현재는 h1 태그에 글자 색상은 파란색으로 글자 크기는 12px 로 설정한 상태다. CSS 문법 CSS 문법 CSS 문법 CSS 문법 CSS 문법 CSS 문법 CSS 문법 CSS 문법 CSS 문법 하지만 이렇게 인라인 스타일로 설정하면 동일한 태그가 여러 파일에 걸쳐 수없이 존재하고 해당 태그의 스타일을 수정해야 하는 경우 같은 수정을 여러번 반복해야 한다. 해당 태그를 찾는것도 일이고 같은 수정을 여러번 하는 것도 일이다. 즉, 유지보수가 힘든 사..

폼 요소에는 form, input, button 과 같은 태그가 있으며 회원가입, 로그인, 검색창, 게시판, 파일업로드 등 사용자의 입력을 받아서 처리하는 경우에 사용한다. 폼 요소에서 입력받은 데이터는 서버로 전달되어 데이터베이스나 백엔드에서 해당 데이터를 처리한다. 실무에서는 백엔드 개발자와 협의하며 작성하는 것이 좋다. 우선 비주얼 스튜디오 편집기(vsc)의 File 메뉴에서 New Window 메뉴를 선택하여 새로운 편집기 창을 연다. html-class 폴더와 동일한 위치에 html-class-practice 폴더를 생성한다. 이후 연습작업은 여기서 하고 html-class 에서는 배운 내용을 웹사이트에 적용해보는 형태로 수업을 진행할 예정이다. 새 편집기 창의 File 메뉴에서 Open Fol..

웹페이지에서 이미지를 보여주려면 img 태그를 사용하면 된다. img 태그에는 아래와 같은 속성들을 설정할 수 있다. 속성이름 (attribute name) 속성값 (attribute value) src 이미지 파일의 경로 a 태그의 href 처럼 절대경로와 상대경로 지정 가능 alt 이미지 파일이 설정한 경로에 존재하지 않거나 이미지가 깨진 경우 보여줄 문구 width 이미지 너비 height 이미지 높이 앞서 앵커 태그에서 만든 프로젝트에서부터 설명을 시작한다. https://github.com/sssssqew/html-css-class GitHub - sssssqew/html-css-class: html css 수업에서 anchor tag 이후 수업부분 html css 수업에서 anchor tag ..

HTML 문서에서 자주 쓰이고 중요한 태그가 앵커(anchor) 태그이다. 앵커 태그는 로 작성하고 현재 페이지에서 이동하려고 하는 페이지의 링크를 지정한다. 링크는 a 태그의 href 속성값으로 지정하면 된다. href 는 hypertext reference 의 약자로 링크의 참조를 말한다. 즉, 현재 페이지에서 어느 경로로 이동할지 페이지 경로를 설정한다. 설정하는 경로는 크게 절대경로와 상대경로가 있다. 절대경로 절대경로에는 두가지 종류가 있다. 현재 웹사이트에서 외부 사이트로 이동하는 경우와 현재 웹사이트 내부에서 페이지를 이동하는 경우이다. 절대경로 - 외부사이트로 이동하는 경우 Anchor Tags 구글 네이버 a 태그의 href 속성으로 구글과 네이버의 사이트 주소를 절대경로로 설정한다. 시..

오래전에는 웹페이지의 큼직큼직한 레이아웃을 구성할때 테이블 태그를 사용하였다. 현재는 시맨틱 태그나 div 태그로 레이아웃을 적용한다. 테이블 태그는 말그대로 일정표, 달력, 차트 등에 사용한다. 게시판이나 복잡한 폼 양식의 레이아웃을 구현하는데도 사용이 될 수 있다. 구분 제목1 제목2 제목3 1 데이터 11 데이터 12 데이터 13 2 데이터 21 데이터 22 데이터 23 3 데이터 31 데이터 32 데이터 33 4 데이터 41 데이터 42 데이터 43 합계 총합 1 총합 2 총합 3 테이블 태그를 이용하여 위와 같은 표를 작성해보자! 단계별로 조금씩 작성한다. 테이블 태그 우선 표를 생성하는 table 태그를 사용하여 기본 뼈대 코드를 작성한다. 테이블 태그 첫번째 행은 표의 헤더영역에 해당하므로 ..

HTML 에서 가장 많이 사용하는 태그는 리스트나 목록을 표현하는 태그이다. 네이버에 접속하여 개발자 도구를 확인해보자! Elements 탭에서 Ctrl + F 를 누르면 네이버 웹페이지에서 태그를 검색할 수 있다. shortcut_list 라고 검색하면 아래와 같이 리스트 태그들이 사용된 모습을 확인할 수 있다. 네이버의 서비스 카테고리를 보여주기 위하여 ul, li 라는 리스트 태그를 사용하고 있다. 비순차 목록 (Unordered List) - ul 태그 비순차 목록은 순서가 없는 리스트나 목록을 의미한다. ul 태그로 목록 전체를 감싸주고 목록 하나 하나는 li 태그로 작성한다. 목록 태그 Unordered List List item List item List item List item 위와 같이..

큼직큼직한 구분은 시맨틱 태그를 사용하면 되므로 지금부터는 내부에 들어가는 컨텐츠에 사용되는 세부적인 태그들을 알아보자! 제목 (heading) heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 웹페이지에서 가장 중요하다고 생각되는 제목은 h1 태그로 작성한다. 그 다음으로 중요하다고 생각되는 제목은 h2 태그로 작성하고, 중요도에 따라 h1~h6 태그를 선택해서 사용하면 된다. 주의할 점은 제목의 크기에 따라 중요도가 결정되는 것이 아니라 태그에 따라 중요도를 선택해야 한다. 제목의 크기는 CSS 스타일에 따라 h3 가 h1보다 더 큰 경우가 있을수 있기 때문이다. 개발자 도구에서 제목(h1~h6) 태그의 스타일을 확인해보면 기본적으로 상하 여백..

https://coding-factory.tistory.com/883 [Html] 시맨틱 태그(Semeantic Tag)란 무엇인가? 시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해 coding-factory.tistory.com 4장에서 각 div 요소에 id 값을 부여하면 같은 div 요소라도 사람은 무슨 역할을 하는 div 요소인지 구분할 수 있다. 하지만 검색엔진은 id 의 의미를 이해하지 못하기 때문에 각 div 요소가 무슨 역할을 하는지 파악하지 못한다. 그렇게 되면 검색엔진은 다른 웹사이트보다 내용이 충실하지 못하다고 판단하여 검색결과 페이지에..

네이버사이트를 개발자 도구에서 확인해보면 헤더 부분의 검색창과 메뉴들을 화면에 보여주기 위하여 수많은 태그들이 사용된 것을 확인할 수 있다. 그 중에서 헤더부분 전체를 그룹화하고 있는 태그는 div 요소라는 것을 확인할 수 있다. 간단한 웹페이지 레이아웃 구현하기 브라우저의 좌우에는 빈공간이 있고 중앙에는 전체 엘리먼트를 모두 묶어줄 div 요소가 필요하다. 중앙에 위치한 전체 div 요소 안에는 크게 세 부분으로 나뉘어진다. 상단에 위치한 헤더영역, 중앙에 위치한 컨텐츠영역, 하단에 위치한 푸터영역으로 구분할 수 있다. 각 영역 안에는 수많은 요소들이 들어갈 것이고 이를 그룹화하기 위한 3개의 div 요소가 필요하다. Logo Menu 상단의 헤더영역은 다시 크게 두 부분으로 나눌수 있다. 로고가 위치..