syleemomo의 IT 블로그 syleemomo의 IT 블로그

실습을 위한 준비를 한다. 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..