* section 의 width: 120vw 로 잡은 이유 120vw 로 잡으면 이미지가 120% 정도 더 커진 상태에서 브라우저 너비를 줄이면 100%까지 이미지가 줄어든다. 이제 브라우저 창을 줄여도 100% 에서는 더이상 사진이 줄어들지 않는다. * body 의 overflow: hidden 으로 잡은 이유 앞서 section 의 width: 120vw 로 잡으면 가로 스크롤바가 생기기 때문이다. 처음 화면 로딩시 양쪽에서 텍스트가 중앙으로 모이는 텍스트 애니메이션 효과가 있습니다. Made fresh to order Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse..

사용된 개념 1. border-box 2. 블록요소 인라인요소 3. 상태 연산자 4. 부정 연산자 5. 너비제한 max-width 6. 가로중앙 정렬 margin: auto 7. 텍스트 세로중앙 정렬 vertical-align: middle 8. 블러처리 backdrop-filter: blur() 9. 글래스모피즘 : background-color: rgba(255, 255, 255, .3) 10. 세로중앙 정렬 position: absolute left: 50% top: 50% transform: translate(-50%, -50%) 6. 클래스 간결하게 작성하고 레고 블록처럼 추가하기 Register FIRST NAME LAST NAME EMAIL PASSWORD check_box_outline_b..

This is some title Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas. Read more→ This is some title Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultr..

세로중앙 배치문제 status 의 동그라미(.dot)와 글자를 묶고 있는 부모요소에 position: relative 를 적용하고, 그 안의 동그라미와 글자에는 position: absolute, top: 50%, transform: translateY(-50%) 적용해서 세로 중앙에 배치하면 된다. display: inline-block 동작 안하는 문제 부모요소의 너비가 좁으면 자식요소에 아무리 display: inline-block 을 적용해도 수평정렬되지 않는다. 부모요소의 width 를 넓히면 된다. Users Table UI User Status Location Phone Contact Actions Kiran Acharya @kiranacharyaa Active Bangalore +91 98..

연습과제 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 문법 하지만 이렇게 인라인 스타일로 설정하면 동일한 태그가 여러 파일에 걸쳐 수없이 존재하고 해당 태그의 스타일을 수정해야 하는 경우 같은 수정을 여러번 반복해야 한다. 해당 태그를 찾는것도 일이고 같은 수정을 여러번 하는 것도 일이다. 즉, 유지보수가 힘든 사..