실습을 위한 준비를 한다. sunblocks home sub1sub1sub1 sub2 sub3 about sub1 sub2 sub3 sub4 sub5 sub6 contact sidemenu1 sidemenu2 sidemenu3 All Rights Reserved By Sunblocks. 푸터 하단에 scroll to top 버튼을 추가한다. html, body{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 200vh; display: flex; flex-direction: column; } header, footer{ height: 70px; flex: none; } main{ flex: 1; /* background: brown; */..

연습과제 아래 코드펜의 화면 레이아웃을 시맨틱 태그로 구성해보세요! https://codepen.io/lordjiggyx/pen/eYOReEd Mobile First Website ... codepen.io 연습과제 아래 코드펜의 카드 컴포넌트 디자인을 참고하여 유사하게 디자인해보세요! https://codepen.io/utilitybend/pen/bGvjLba Hovers and focus using the has() relational pseudo-class Hovers and focus using the has() relational pseudo-class can give a boost to a11y... codepen.io 웹사이트에서 자주 사용되는 카드 컴포넌트를 한번 디자인해보세요! 1. 카드..

연습과제 캡쳐화면에 제시된 표와 유사하게 디자인해보세요! https://kiranworkspace.com/demo/projects/code-snippets/table/user-table/ 1. 개발자 도구에서 폰트 크기나 색상을 참고해서 구현해주세요! 2. 시맨틱 태그로 전체 뼈대 구조를 잡고 시작해주세요! 3. 드롭다운 메뉴는 하실수 있으신 분만 시도해보세요!

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org css 변수는 규모있는 웹사이트의 스타일 코드에서 반복해서 등장하는 값을 재사용할 수 있게 변수로 지정하는 것이다. 이렇게 하면 반복되는 동일한 값을 수정해야 할때 맨 상단에 지정한 변수값만 변경하면 되므로 유지..

https://d2.naver.com/helloworld/854017 flex-grow 아이템의 확대에 관련된 속성 0 또는 자연수 기본값 0 0 : 컨텐츠크기로 고정 (늘어나지 않음) 1 이상 : 컨테이너를 완전히 채우도록 늘어남 아이템 .container { display: flex; height: 100px; border: 3px solid #333; } .item{ flex-grow: 0; margin: 5px; background-color:skyblue; } .container { display: flex; height: 100px; border: 3px solid #333; } .item{ flex-grow: 1; margin: 5px; background-color:skyblue; } 아래..

박스모델은 웹페이지의 레이아웃을 짜거나 요소를 배치할때 중요하게 사용되는 개념이다. 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..