: ) Web41 [HTML, CSS 실습] Table 레이아웃을 이용해 쇼핑 카트 화면 만들기 [css] /* td, th { border: 1px solid black; } */ .table-background td, th{ padding: 15px; border-bottom: 1px solid #c2d3de; color: gray; text-align: center; font-size: 10px; } .background-blue { width: 100%; height: 370px; background: skyblue; padding: 30px; } .table-background { width: 100%; max-width: 600px; background: white; border-radius: 10px; position: relative; } .table-background th:nth-.. 2023. 11. 19. [HTML, CSS 실습] Contact Form 만들기 [css] div, input, textarea { box-sizing: border-box; } body { margin: 0; } .form-background{ padding: 30px; background-color: black; } .form-white { padding: 30px; background-color: white; /* 크기 제한 */ width: 80%; max-width: 600px; /* 가운데 정렬 */ margin: auto; } .form-input { width: 100%; padding: 5px; font-size: 10px; border: 1px solid gray; border-radius: 5px; } .w-50 { width: 50%; float: left; p.. 2023. 11. 17. [HTML, CSS 실습] 블로그 레이아웃 만들기 [blog.css] .container { width: 800px; margin-left: auto; margin-right: auto; } .left { width: 70%; height: 100%; /* background: beige; */ float: left; } .right { width: 30%; height: 100%; /* background: lightgray; */ float: left; } .blog-profile { width: 60px; margin: 5px; float: left; } .blog-name { width: 80%; height: 100%; float: left; } [blog_layout.html] 이름 1시간 전 오리가 많은 베르사유 정원 오리가 엄청 많아서 그.. 2023. 11. 16. [HTML, CSS] 레이아웃 만들기 (float, inline-box) 1. float를 이용해서 만들기 전체를 감싸는 wrapper(=container) 만들어 두면편함 width: 100%; → 부모요소의 100% display: block (가로행 전부 차지)속성 때문에 옆에 안 나와서 float속성 이용 float: left -> 요소를 붕 띄워서 정렬 clear: both -> float 다음에 오는 요소에게 주 float로 발생하는 이상현상 해결 가능() [main.css] .container { width: 800px; } .header { width: 100%; height: 100px; background: darkolivegreen; } .left-menu { width: 20%; height: 400px; background: cornflowerblue;.. 2023. 11. 16. VSCode git이랑 연결하기 / git에 올리기 **아주 간결하게 쓴 버전** 1. Github에서 repository 하나 만들기 2. VSCode에서 f1 -> git clone -> Clone from GitHub 들어가서 로그인하기 3. Repository 선택 4. 연결할 폴더 선택 이렇게 하면 해당 Repository와 지정한 폴더가 연결된다. 여기서 기존에 있던 파일을 올리고 싶다면 해당 폴더 아래로 파일들을 옮기고 다음 명령어들을 이용한다. 1. git status : 현재 올라가지 않은 파일 확인 2. git add -A : 현재 안 올라간 파일 모두 추가하기 3. git commit -m "메시지" : 메시지와 함께 커밋하기 여기서 다음과 같은 오류가 난다면 Author identity unknown *** Please tell me.. 2023. 11. 9. CSS 기초 - <div>로 만든 상자에 그림자 넣기 Q. 박스에 그림자 넣기 ➡️ box-shadow 속성 이용 box-shadow: none | x-posision y-posision blur spread color | inset|initial|inherit • none : 그림자 효과X • x-posision : 가로 위치. 양수는 오른쪽 음수는 왼쪽. - 필수 • y-posision : 세로 위치. 양수는 아래쪽 음수는 위쪽. - 필수 • blur : 값이 클수록 그림자가 흐려진다. • spread : 양수면 그림자 확장. 음수면 축소. • color : 그림자 색 • inset : 그림자를 안쪽에 만들기. • initial : 기본값. • inherit : 부모의 값을 상속. [CSS 파일] .box { width: 300px; hight: 50p.. 2023. 11. 9. 이전 1 2 3 4 5 6 7 다음
