프론트엔드 기록

display : inline-block 사용 법 가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다. display : inline-block을 사용해봅시다. .left-box { width : 100px; height : 100px; display : inline-block; } .right-box { width : 100px; height : 100px; display : inline-block; } 위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다. display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다. inline- block은 "내 폭과 높이만큼 자리차지하게 해주세요~" 라는 뜻입니다. 간편하지만 사이에 스페이스바 공백이 있다면 그대로..

HTML, CSS 2024. 2. 14. 18:57

html css로 사이트 레이아웃 만드는 법 : 만들고 싶은 레이아웃 디자인 위에 네모박스를 먼저 그려보고 바깥 네모부터 써서 구현하면 됩니다. 어려워보이는 레이아웃도 네모박스부터 그 위에 그려보고 바깥 네모부분부터 로 하나하나 만들기 시작하면 그럼 무슨 레이아웃을 가져다주든 알아서 만들 수 있음 ▲ 예를 들어 당근마켓 상품하나 레이아웃을 구현하고 싶으면 네모박스처럼 보이는걸 전부 네모로 표시해보고 바깥 네모 부터 하나하나 로 구현하라는 것임 물론 문자는 이미지는 이런거 쓰는게 좋겠죠 그리고 그러려면 박스를 정렬하고 배치하는 법도 알아야합니다. 오늘 배울 것임 요소를 공중에 띄워 왼쪽/오른쪽 정렬하는 float 속성 .left-box { width : 100px; height : 100px; float ..

HTML, CSS 2024. 2. 14. 18:35

네모 박스 디자인에 많이 사용하는 CSS 속성 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } margin은 바깥 여백, padding은 안쪽 여백, border는 테두리 (차례로 두께, 선의 종류, 색상), border-radius는 테두리 둥글게 처리입니다. 가운데 정렬도 많이 하는데 저번 이미지처럼 display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다. Q. 이렇게 많은 스타일을 다 언제 외우고 있냐고요? 외워봤자 맨날 까먹기 때문에 필요하면 구글에서 찾아쓰는게 일반적입니다. margin과 padding을 원하는 방향에만 줄 ..

HTML, CSS 2024. 2. 14. 18:32

style 속성 안에 들어갈 코드가 매우 길어지면 HTML이 더러워지기 때문에 이걸 다른 파일로 빼서 작성할 수 있습니다. CSS 파일로 빼면 됩니다. 0. CSS를 사용하시려면 CSS파일을 만든 후 HTML에 첨부해야합니다. 우선 작업폴더에 .css로 끝나는 파일 아무거나 하나 만드시고 HTML 파일로 돌아와서 태그 안에 태그를 넣으시고 href라는 속성에 여러분의 .css 파일 경로를 지정해놓으면 css 파일 이용가능합니다. 저는 css 폴더 안에 main.css 파일을 만들었기 때문에 css/main.css 이렇게 경로를 적었습니다. "현재 html파일과 같은 경로에 있는 css 폴더 내부의 main.css 파일을 첨부하라"는 뜻입니다. 그럼 이제 css 파일에서 스타일 작성이 가능한데 정확한 방법..

HTML, CSS 2024. 2. 14. 18:21

간단한 스타일 넣는 법 글자 거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다. 거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다. 여러개를 넣고 싶다면 뒤에 쭉 나열해주시면 됩니다. 세미콜론 까먹으면 안됩니다. 자주 사용하는 글자 스타일들 font-size : 20px; font-family : 'gulim'; color : black; letter-spacing : -1px; text-align : center; font-weight : 600; 영어 단어를 잘 알고 계시면 무슨 뜻인지 바로바로 파악은 쉽습니다. 이미지 정렬과 폭 조정 display : block; margin-left : auto; margin-right : auto; width : 150px; 이미..

HTML, CSS 2024. 2. 14. 18:20

HTML은 로 작성합니다. 안녕 이런 식의 태그들을 열고 닫은 후 내부에 글을 넣고 그림을 넣을 수 있습니다. 태그들은 종류와 용도가 매우 많이 존재합니다. 글을 작성하고 싶다면 글을 넣을 때 쓰는 태그를 사용하고, 버튼을 넣고 싶으면 버튼을 넣을 때 쓰는 태그를 사용하면 됩니다. 기본 태그 목록 글 본문 글 제목 링크 버튼 리스트 리스트 ① 태그를 열었으면 으로 닫아야합니다. 닫지 않아도 되는 태그도 몇개 존재합니다. 이런거요 ② 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가정보를 기입가능합니다. href는 클릭시 이동할 링크를 기입가능하고 src는 파일 경로를 기입가능합니다. ③ 용도에 맞는 태그를 사용해야합니다. 용도에 맞는 태그를 쓰는게 강제되는 사항은 아닙니다. ..

HTML, CSS 2024. 2. 14. 18:19

Brackets 에디터 : https://brackets.io/ (윈도우는 .msi 맥은 .dmg) Visual Studio code 에디터 : https://code.visualstudio.com/ (참고1) 에디터 상단 메뉴에서 '폴더열기'로 먼저 여러분의 작업폴더를 오픈하신 후 파일을 만들든지 코딩을 하든지 하셔야합니다. (참고2) 에디터의 번개 버튼을 누르시면 실시간 미리보기가 가능합니다. (참고3) ctrl + s 단축키로 파일 저장잘하십시오 맥북은 ctrl 대신 command입니다. (자주 묻는 질문) Q. 왜 저는 Brackets 에디터 실시간 미리보기가 잘 안되죠? A. 번개버튼 다시 껐다 켜보시거나 파일 저장 잘하십시오 HTML은 어디다 쓰는 언어? 웹페이지를 만들고 디자인하고 싶을 때 ..

HTML, CSS 2024. 2. 14. 18:17

이메일 성 이름 메세지 구독 h3 { font-family: "Gamja Flower", sans-serif; font-weight: 800; font-style: normal; transform: rotate(0.04deg); } .profile { display: block; margin-left: auto; margin-right: auto; border-radius: 100px; } .title { font-size: 16px; text-align: center; } .box { width: 200px; background-color: violet; margin: 10px; padding: 40px; border: 2px solid black; border-radius: 10px; margin-l..

HTML, CSS 2024. 1. 21. 10:46