현우의 개발상자

Apply(적용) 다음 주에 Javascript를 들어가기에 이번주는 HTML & CSS 실습으로 진행될 것이다. 로그인 또는 회원가입 위니브에서 여러분의 궁금증을 해결하세요! :) 아이디를 입력해 주세요 아이디 혹은 비밀번호가 일치하지 않습니다. 로그인 상태 유지 로그인 회원가입 아이디/비밀번호 찾기 구글 계정으로 로그인 페이스북 계정으로 로그인 네이버 계정으로 로그인 카카오톡 계정으로 로그인 @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Spoqa Han Sans Neo", "sans-serif"; } in..

Apply(적용) 3주간 배운 html&css를 통하여 자판기 페이지를 만들어 봤다. Original Cola 1000원 violet Cola 1000원 Yellow Cola 1000원 Cool Cola 1000원 Green Cola 1000원 Orange Cola 1000원 잔액 1,000원 거스름돈 반환 입금 Original_Cola 1 Green_Coke 2 획득 소지금 25,000원 획득한 음료 Original_Cola 1 Original_Cola 2 Original_Cola 1 Original_Cola 5 총금액 : 9,000 원 @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); .notosanskr * { font-family: ..

Apply & Feeling (적용 및 느낀 점) *, *:after, *:before { position: relative; box-sizing: border-box; } body { background: white; } .wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .hyunwoo { position: absolute; width: 500px; height: 380px; border-radius: 200px; animation: zoomIn 7s infinite reverse; } @keyframes zoomIn { 0% { transform: scale3d(2.5, 2.5, 2.5); ..

Apply & Feeling (적용 및 느낀 점) 환영합니다 최현우님! 로그아웃 2023.02.27의 비밀일기 제목 내용 작성하기 이는 청춘의 것은 그들의 운다.2023.02.24.THU Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio odit voluptates adipisci, dolores ipsum reprehenderit, numquam minus tempora sapiente, asperiores hic eos nisi ad? Odit, dolore? Consequuntur voluptatum quo perferendis. Excepturi dolor quidem totam minus dolore sunt optio, omnis ..

Findings (배운 점) form form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그입니다. 별도 제출할 필요가 없다면 form 태그를 사용하지 않으셔도 됩니다 label 사용자 인터페이스의 항목을 나타냅니다. input과 함께 사용해 주세요! 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 합니다. label을 클릭하여 input에 포커스를 이동시키거나 활성화시킬 수 있습니다. 아이디 -------------------------------------------------------------- 아이디 미디어 쿼리 @media 미디어 특성 width: 스크롤바를 포함한 뷰포트의 너비 min-width, max-width 최소 최대 너비 height : ..

Findings (배운 점) animation JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다. 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. transition vs animation transition의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다. @keyframes 0%(from)는 시작점, 100%(to)는 종료지점을 의미한다. /* [ from ~ to 속성 ] */ @keyframes animation-name { from {} to {} } /* [ 0% ~ 100% 속성 ] */ @keyframes animation-n..

Findings (배운 점) Grid 두 방향(가로-세로) 레이아웃 시스템 (2차원) 🙌 flex는 한 방향 레이아웃 시스템 (1차원) 용어정리 https://yamoo9.gitbook.io/css-grid/css-grid-term 한 눈에 살펴보는 Grid 용어 - CSS Grid Layout Guidebook 그리드의 행/열을 그리는 선을 말하며, 각 선은 라인 넘버를 갖습니다. 그리드 아이템을 배치하는 기준으로 사용됩니다. yamoo9.gitbook.io 위 사이트에서 너무나도 이해하기 쉽게 정리했다. (글쓴이의 복습과 여러분의 이해를 돕기 위해!!) grid-container에 사용하는 속성 grid-template-columns 열 방향 그리드 트랙의 사이즈를 설정합니다. .container {..

Findings (배운 점) 컨테이닝 블록 Containing Block 이란? 어떠한 요소의 크기와 위치에 영향을 주는 영역으로, 대부분 가장 가까운 블록 레벨 조상의 콘텐츠 영역이 컨테이닝 블록이 된다. (예외도 있다) 컨테이닝 블록의 조건 position 속성이 static, relative, sticky 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너(inline- block, block, list-item 등의 요소), 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다. position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이..