💻 더 나은 개발자 되기/html, css 11

터미널로 깃 폴더 생성부터 커밋까지 진행해보겠습니다! ⭐️참고로, 저는 터미널테마를 사용하기 때문에, PC정보가 상단 타이틀에만 보이고, 맨 앞에 생략되어 있어요. 다르다고 당황하지 마시구 참고해서 봐주세요. ⭐️ 설치한 테마는 요기 깃 폴더 생성 cd 상위폴더명 ls 먼저 원하는 폴더로 들어가서 폴더 내용을 확인해줍니다. $ mkdir 새폴더명 폴더명을 생성해주고요. ls 폴더 안을 보면 내부 파일들이 보입니다. cd 새폴더명 새로 만든 폴더 안으로 이동을 해줍니다. git init 새로운 폴더를 깃폴더로 설정해줍니다. 그럼 비어있는 깃 저장소를 다시 초기화했다는 메시지가 나와요. (저는 한글이지만, 영문으로 나오실 수도 있어요.) 깃폴더 내부 확인 ls 폴더 내부 파일을 확인하는데, 안보입니다. l..

시맨틱 태그란? 와 기능은 동일하지만, 콘텐츠의 특정 의미가 담겨있는 태그를 의미하는데요. div는 어디든 사용해도 무방하지만, 시맨틱 태그는 해당 태그에 의미를 담고 있는데요. 이 엘리먼트의 역할이 무엇인지 보다 명확하게 드러내주는 것이라고 볼 수 있을 듯 해요. 예를들어, header에는 페이지의 머릿글로 제목이나 로고 등등을 포함하고 있고, nav는 내비게이션이나 목차, section은 본문에 포함된 다양한 내용들을 나눈것, footer에는 하단 바닥글로 저작권이나 회사 정보 등등이 담겨있어요. 그럼, 이런 시맨틱 태그를 사용하게 되는 장점을 알아봅시다 :) 시맨틱 태그의 장점 검색엔진 최적화 의미 있는 태그를 통해 검색시 정확한 구조 분석에 도움을 주어 사이트 검색 시 노출 순위를 높일 수 있습니..

a태그를 텍스트 그대로 사용 하는 경우도 있지만, 마치 버튼처럼 만들어서 사용하는 경우가 굉장히 많다. a태그를 이용해서 버튼처럼 활용하는 css를 공유해보려고 한다. .aButton{ cursor: pointer; text-decoration: none; border-radius: 8px; height: 50px; width: 130px; padding: 16px 32px; text-align: center; background: #6d6afe; color: #ffffff; font-weight: 600; font-size: 17px; } 위 코드를 순서대로 설명하자면- cursor: pointer; : a태그의 경우엔 마우스를 대면 기본이 손 모양(pointer)으로 되니 생략해도 되지만, 마우스를 ..

display : grid; 를 먼저 사용한 뒤 아래 속성들을 추가로 부여할 수 있다. 격자 나누기 - grid-template-rows(columns) 간격 - gap 크기 미리 정하기 - grid-auto-rows(columns) 원하는 위치에, 여러 칸에 걸쳐서 배치 - grid-row(column), span 이름으로 배치 - grid-area, grid-template-areas 격자 나누기 grid-template-rows : 100px 200px 300px -> 첫번째, 두번째, 세번째 각각의 너비를 설정 grid-template-columns : 100px 200px 300px -> 첫번째, 두번째, 세번째 각각의 높이를 설정 grid-template : rows와 columns를 한 번에..