연습과제 1 구글 폰트를 키우면 아이콘 크기가 커지면서 아웃라인이 두꺼워지는데 구글 폰트에서는 폰트 두께도 설정할 수 있으므로 이를 활용하면 폰트 크기가 커져도 얇게 보이도록 할 수 있다. play_circle_outline 끊⁠김 없⁠는 백⁠그⁠라⁠운⁠드 재⁠생 화면을 끄거나 다른 앱을 사용하면서 광고로 끊김 없이 동영상을 시청해 보세요 download_for_offline 오⁠프⁠라⁠인 저⁠장 동⁠영⁠상⁠을 저⁠장⁠하⁠여 기⁠내, 출⁠퇴⁠근⁠길 등⁠에⁠서⁠도 시⁠청⁠하⁠세⁠요. play_circle_outline YouTube Music Premium YouTube Music⁠에⁠서 맞⁠춤 동⁠영⁠상⁠, 재⁠생⁠목⁠록⁠, 라⁠이⁠브 음⁠원 등⁠을 감⁠상⁠해 보⁠세⁠요. html, body{ margi..

https://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working line-height as a percentage not working I am having an issue with line-height that I cannot quite get my head around. The following code will center an image within a div: CSS .bar { height: 800px; width: 100%; line-height: stackoverflow.com 당신의 티스토리에 다양한 플러그인01을 사용할 수 있어요. 사이트 보안을 위해 더 안전한 암호화 접속02을 사용해보세요. 콘텐츠를..

박스모델은 웹페이지의 레이아웃을 짜거나 요소를 배치할때 중요하게 사용되는 개념이다. content 요소에서 실제 내용이 들어가는 영역 padding 요소 안쪽 여백 border 요소의 테두리 margin 요소 바깥 여백 http://www.tcpschool.com/css/css_boxmodel_boxmodel 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 클래스명이 box 인 div 요소를 만들고 박스모델에 대해 알아보자! 컨텐츠 요소에 너비(width) 와 높이(height)만 설정한 경우 너비와 높이만 설정한 경우 요소의 전체 크기는 설정한 너비와 높이만큼이다. .box{ width: 300px; height: ..

선택자는 CSS 에서 가장 중요한 개념 중 하나이다. 선택자를 자유자재로 잘쓰면 따로 클래스나 id 를 설정하지 않고도 스타일을 적용할 수 있다. 해당 수업에서는 자주 쓰이는 총 15개의 선택자를 학습하기로 한다. HTML 수업시간에 완성한 프로젝트의 index.html 파일을 이용하여 다양한 선택자를 연습해보자! 스타일 적용을 위하여 head 안에 link 태그로 style.css 파일과 연결해준다. 회원가입 페이지 필수 사항 사용자 이름: 이메일 주소: 사용자 비밀번호: 옵션 사항 주소: 서울특별시 부산광역시 대구광역시 성별: 남성 여성 관심사: HTML CSS JAVASCRIPT 인사말 프로필 사진 웹사이트: 생년월일: 좋아하는 과일: 성별과 관심사 부분의 input, label 은 스타일의 원활한..

색상 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 태그를 사용하여 기본 뼈대 코드를 작성한다. 테이블 태그 첫번째 행은 표의 헤더영역에 해당하므로 ..