✨ Front-end/CSS5 CSS - div를 가운데 정렬 (inline-block) 이전 포스팅에서는 float과 overflow를 이용하여 div를 가운데 정렬해보았다. div를 가운데 정렬하기 위해서 또 한가지의 방법이 있다. 알아보자. HTML 삽입 미리보기할 수 없는 소스 .wrap > div { } 태그에 width를 추가하고, display 값을 inline-block으로 바꾸었다. .wrap > div { border : 1px solid black; background-color: maroon; width: 20%; display: inline-block; } float과 inline-block에는 차이점이 있다. float은 빈공간을 안띄워주고, inline-block은 공간을 띄워준다. 단, inline-block은 크기를 조절해주기가 float보다는 어려운 단점이 있다. 2023. 3. 7. CSS - div를 가운데 정렬 (float과 overflow) div를 사용했는데 내용을 중간으로 옮기고 싶을 경우가 있다. 아래와 같이 적용해보자 HTML 삽입 미리보기할 수 없는 소스 .wrap > div { } 태그에 width를 추가해주었다. .wrap > div{ /* >은 wrap의 자식 테이블 선택. */ background-color: fuchsia; border: 1px solid black; width: 20%; } .wrap > div { } 태그에 float을 추가해주었다. .wrap > div{ /* >은 wrap의 자식 테이블 선택. */ background-color: fuchsia; border: 1px solid black; width: 20%; float:left; } float를 적용시키면 인식을 못한다. 이 float을 감싸고 있.. 2023. 3. 7. CSS - 로그인, 게시판, 회원가입 폼 만들어보기 먼저 로그인 html 이다. HTML 삽입 미리보기할 수 없는 소스 padding과 margin에 대해서 추가적으로 공부해보았다. padding은 안쪽 여백을 나타내주며, margin은 바깥 여백을 담당한다. 16번 째 줄의 margin: 0 auto; 라는 코드가 있다. 이것은 상하여백 0 좌우여백 auto라는 태그이다. 25번 째 줄의 border-collapse: collapse;란 이중 실선을 방지해주는 기능을 한다. 다음은 회원가입 html이다. HTML 삽입 미리보기할 수 없는 소스 마지막으로 게시판 html이다. HTML 삽입 미리보기할 수 없는 소스 이렇게 해서 HTML과 CSS로 간단한 기능들을 만들어 보았다. 자바스크립트(JS)를 배워 이 세개로 빨리 연동해서 프로젝트도 빨리 만들어볼 .. 2023. 2. 9. CSS - 자식과 자손 선택자 ( > ) HTML에 코드를쓰고 그때그때마다 style을 적용시키면 가독성이 매우 떨어지고 코딩하기가 매우 어려워진다. CSS를 이용해 HTML에서 사용했던 코드의 주소를 찾아 꾸며주는 역할에 대해 더 알아보자. HTML 삽입 미리보기할 수 없는 소스 첫번 째로, id속성 즉, #div1 > div { } 에 대해서 알아보자. #div1 은 두번 째 div에 있는 id=div1인 div를 가르키며, " > " 표시는 꾸며준다는 것이다. 그리고 뒤에있는 div는 #div1의 자식이라고 생각해보자. 즉, #div1 > div { } 에 속해있는 1과 2는 #div1에서 변경해준 값이 똑같이 적용된다. class속성도 똑같다. 다만, " > " 표시 대신해서 " " 한칸 공백을 사용한다. 따라서 div2의 자식들인 3 .. 2023. 2. 9. 이전 1 2 다음
