09009

좋아요 이모티콘 옆에 숫자를 적절한 위치에 배치하고 싶을 때 position: relative; 속성을 사용한다. 0 원래 있는 위치에서 아래에서 15px정도 올려보았다. .score { position: relative; bottom: 15px; } css를 위와 같이 적용하면 요소를 좋아요 이모티콘과 원하는 위치에 배치할 수 있다.

로그인 회원가입

https://getbootstrap.com/docs/5.3/getting-started/introduction/ Hello, world! 바로 이전에 삽입 바로 이전에 JS 코드 삽입

CSS 노멀라이징, 라이브러리 * { margin: 0; padding: 0; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } .cell { float: left; } .row ::after { clear: both; display: block; content: ""; } 1. 헤더 제작 html 소스 코드 추가 로고가 들어가는 300 * 100 회색 박스 css 소스 코드 추가 .header { width: 1200px; height: 100px; background-color: red; margin: 0 auto; /* 중앙 정렬 */ } .header > .gray-box { width: 300px; height..

레이아웃 디자인 시안 화면 위의 레이아웃을 확인하면 5개의 div가 들어가야한다는 사실을 알 수 있다. 노멀라이징, 라이브러리는 레이아웃 작업을 시작하기 이전에 만들어야 한다. * { margin: 0; padding: 0; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } .cell { float: left; } .row ::after { clear: both; display: block; content: ""; } 1. 헤더 제작 margin: 0 auto; - 요소 중앙 정렬 (div를 화면 중앙에 정렬시킨다) text-align: center; - 글자를 중앙 정렬시킨다. 글자를 중앙 정렬시켰지만 글자가 요소의 ..

빨간 박스 (900, 200) 파란 박스 (300, 200) 레이아웃을 제작하기 이전에 가장 먼저 해야할 일은 CSS에서 노멀라이징 작업이다. 어떤 작업을 시작하던지 가장 먼저 해야할 일이다. 노멀라이징 작업 /* 노멀라이징 */ * { margin: 0; padding: 0; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } /* 라이브러리 */ .cell { float: left; } .row ::after { clear: both; display: block; content: ""; } 먼저 빨간색 박스와 파란색 박스를 만들어보자. 잘못된 방법 얼핏 보기에 위와 같이 원하는 형태로 박스를 배치한 것처럼 보이나 창의..

margin, padding: 여백을 만들어주는 속성 박스의 위치를 변경하고 싶을 때 사용하는 것이 margin과 padding 이다. padding 속성을 지정해주었더니 아래와 같이 화면이 변경되었다. padding: 안에 있는 요소(300px, 300px)는 그대로 놔두고 상하좌우 10px의 여백을 만든다. (padding은 본인의 덩치를 키워서 여백을 만들어준다라고 생각하면 된다. 덩치를 키워서 안에 있는 요소들이 그만큼 떨어지는 것이다.) padding: 덩치를 키워서 여백을 만들어주는 것 margin: padding과 다르게 덩치를 키우지 않고 여백을 만들어준다. -- 중요 -- margin: 0 auto; 어떤 박스를 만들어 놓았을 때, 박스를 중앙으로 정렬하고 싶을 때 margin: 0 au..

CSS 기본 요소 color : 내부 텍스트 색상 변경 background-color : 배경 색상 변경 width: 너비 크기 요소 (가로 크기) px, % 사용 가능 height: 높이 크기 요소 (세로 크기) px, % 사용 가능 padding: 내부 여백 요소 (배경 포함 o ) div 태그로 사각형 하나를 만들어보자. 위의 소스코드는 너비 500px, 높이 500px의 정사각형을 만들어놓은 것이다. 너비와 높이를 지정해주었지만 화면에 아무것도 출력되지 않는 것처럼 보인다. 박스를 만들었지만 배경 색상을 따로 지정해주지 않았기 때문에 자동으로 투명한 색깔로 지정된 것이다. 그래서 박스는 만들어졌지만 색깔이 투명하기 때문에 적용한 속성이 반영이 되지않은 것처럼 보이는 것이다. 박스를 만들 때, 높이..

flexbox: box와 item들을 행, 열로 자유자재로 배치시켜줄 수 있는 것 float float: left item이 왼쪽에 배치 float: center item을 중간에 배치 float: right item을 오른쪽에 배치 flexbox 100 % vs 100vh % : container가 들어있는 부모의 높이의 100%를 채우겠다는 의미 vh : 부모에 상관없이 viewport height의 100%를 사용하겠다는 의미 color tools https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get ..

div, span div : 공간을 블록 형식으로 분할 공간을 분할할 때 div 태그를 사용하면 각 태그가 한 행을 모두 차지한다. 이를 블록 형식이라 한다. = 한 줄에 하나씩 나온다. div에서 display: inline-block으로 변경하면 span처럼 한 줄에 여러 개가 나온다. inline으로 변경하면 화면에 표시가 되지 않는다. span : 공간을 인라인 형식으로 분할 공간을 분할할 때 span 태그를 사용하면 각 태그는 자신의 글자 크기만큼 영역을 차지하게 된다. 왼쪽에서 오른쪽으로 쌓이는데 이를 인라인 형식이라 한다. span은 안에 내용물이 있어야 화면에 표기된다. 한 줄에 공간이 많으면 여러 개가 나온다. span에서 display: block으로 변경하면 div처럼 한 줄에 하나씩..

가시 속성 태그가 화면에 보이는 방식을 지정한다. 대표적으로 display 속성이 있다. display 속성에서 주로 사용하는 키워드 none 화면에 보이지 않는다 block 블록 박스 형식으로 지정 inline 인라인 박스 형식으로 지정 inline-block 블록과 인라인의 중간 형태로 지정 none 키워드 적용하기 더미 객체 대상 객체 더미 객체 display 속성에 none을 적용하였을 때 태그가 화면에서 보이지 않는 것을 확인할 수 있다. block 키워드 적용하기 실행 후 검사에서 각 태그를 클릭하면 해당 요소가 선택된다. inline, inline-block 키워드 비교하기 inline 키워드(인라인 형식) 의미 없는 더미 객체 더미 객체 대상 객체 더미 객체 의미 없는 더미 객체 width..

CSS에서는 각 요소가 박스라는 사각 영역을 생성한다. 이 사각영역이나 이것을 둘러싼 테두리에 크기, 색상, 위치 등과 관련된 속성을 지정하여 스타일을 변경한다. margin 속성, border 속성, width 속성, height 속성을 모두 합쳐 박스 속성이라고 한다. 박스 크기와 여백 박스 속성 margin 테두리와 다른 태그 간격 지정 border 테두리 두께 지정 padding 테두리와 글자 사이의 간격 지정, 테두리 바깥쪽 여백 지정. 배경색은 padding 영역까지만 적용 width 글자를 감싸는 영역의 가로 크기 height 글자를 감싸는 영역의 세로 크기 width, height 속성 적용하기 margin, padding 속성 적용하기 태그 전체 크기 --------------------..