이미지와 글의 줄 맞추기
vertical-align: middle; 꼭 img 태그에 스타일 줘야함 vertical-align: middle;
- 프론트엔드/HTML, CSS
- · 2023. 9. 4.
vertical-align: middle; 꼭 img 태그에 스타일 줘야함 vertical-align: middle;
img src : 이미지의 경로 width : 이미지의 가로 사이즈 height : 이미지의 세로 사이즈 a href : 링크 input : 검색창 (설명: https://htmlreference.io/element/input/) input - HTML Reference Learn how input works in HTML. htmlreference.io div : 영역을 나눔 p : 문단을 나눔 button : 버튼 span : 그룹을 나누는데 다음줄로 넘어가는 div와 다르게 한 줄에서 그룹을 나눌 수 있음.
1. 첫번째 미션 Box 1 Box 2 Box 3 이 HTML코드를 이용해 이런 결과물을 만들어보자! 우선 어려움이 있어서 결국 선생님이 올려주신 정답을 보고야 말았는데 -HTML- Box 1 Box 2 Box 3 여기서 Box 2의 코드인 class="box green" 은 CSS에서 .box green 을 줘도 적용이 안되었다. 일단 정답은 '.green' 으로 적어야 됐는데 잘은 모르겠지만 위에서 먼저 '.box'를 적었으니 "box" 가 들어간건 먼저 적은 코드의 값들이 적용되는게 아닌가 싶다. (아닐 수 있음)일단 정답 공개! -CSS .box { border: 50px solid red; width: 200px; padding: 50px; margin-bottom : 20px; } .green..
CSS에서 자주 사용하는 스타일! (계속 업데이트 할 예정) color : 텍스트 색상 변경 background-color : 배경색 변경 border : 테두리 (두께 스타일 색상) width / height : 넓이 / 높이 지정 text-align : 정렬 (left, center, right) margin : 영역 밖 공간 (top, left, right, bottom) padding : 영역 안 공간 (top, left, right, bottom) font-size : 글자 사이즈 변경 font-family : 글씨체 변경 font-weight : 글자 굵기 조절 padding-left text-indent : padding은 개체 전체가 이동하고 text-indent는 첫부분만 들여쓰기가 되는..
UI, UX를 공부하다가 알고리즘으로 뜬 어느 학원의 국비지원 짧은 강의를 보고 Figma 기초 강의를 수강신청했다! 수강신청을 하고 학원사이트를 구경하는데 갑자기 고민이 생겼다. 프론트엔드도 같이 배워볼까...? 아님 웹퍼블리셔..? 프론트엔드 vs 웹 퍼블리셔 챗gpt에 물어도 보고ㅋㅋ 서칭한 결과 웹 퍼블리셔보단 프론트엔드에 더 마음이 가서 프론트엔드 수업을 들어보기로 했다. 일단 취준생인지라 돈이 없기도 하고 이 분야가 나한테 맞는지 알기 위해서 큰돈을 쓰는건 무리였다. 그래서 세운 조건이 1. 짧은 기간안에 끝낼 수 있는 올인원 강의가 아닌 것! 2. 1번과 동일 조건으로 국비지원이 가능한 곳 이렇게 알아보기로 했다. 그렇게 찾아보던 와중에 강사이자 유튜버인 한 강사님의 수업을 알게되었다.(사실..