Front-end10 CSS] margin과 padding의 차이 문제 상황아래 폼에서 매물 정보 글자를 조금 더 오른쪽과 아래로 배치하고 싶다.이때 margin과 padding에 대한 이해가 필요하다. margin/padding/border/height/width개발자 도구(F12)를 키면 아래 이미지처럼 margin, padding, border, content 영역이 나온다. 자세한 설명은 아래를 참고하면 된다. margin(주황) : 바깥쪽을 기준으로 떨어뜨린다. 주변 요소와 거리를 두기 위한 영역이다. 위 그림에서 margin을 주면 테두리를 포함한 매물 전체 폼이 이동하게 된다. (바깥쪽에서 움직이는 애 - 보통 container 움직일 때 사용)h1 { margin-top:30px; margin-bottom: 20px; margin-left:150px.. 2024. 10. 3. 10분만에 적용하는 Finder 부트스트랩 사용 방법 문제 상황예쁜 input 박스를 구하고 싶다.생코딩 하는 것 말고 이미 만들어진 좋은 input 박스를 구해서 쓸 수 없을까?문제 해결부트스트랩 Finder 을 검색하거나 아래 사이트로 접속한다.https://finder.createx.studio/components/input-group.html Finder | Input group finder.createx.studio 원하는 UI를 찾고 원하는 것이 있는 곳에 HTML 버튼을 클릭한다. 그대로 복사해서 사용한다.- 코드 에디터를 켜서 html 문서의 기본 골격 형태를 만든다. (vs code의 경우 ! + enter 을 치면 만들어준다.) - 아까 복사한 코드를 태그 사이에 넣는다. - Finder은 부트스트랩을 추가해야 한다. 부트스트랩을 CDN.. 2024. 9. 30. html 코드를 vue 코드로 변환하기 문제 상황다른 라이브러리 사이트에서 좋은 코드를 발견해서 사용하려고 한다.그런데 그 코드가 html으로 되어 있고, 나는 vue 프로젝트에 사용해야 하는 경우 생긴 문제이다. html 코드를 vue에 바로 넣으면 오류가 발생한다!vue 형식에 맞춰 넣어주어야 한다.문제 해결변환 공식HTML/CSS/JSVue3 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)vue 파일의 태그 안에 삽입CDN 등 라이브러리 연결 코드 중 CSS + 아이콘(font awesome 라이브러리 등)index.html 파일의 1단계 : 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)을 vue 파일의 태그 안에 삽입 2단계 : CDN 등 라이브.. 2024. 9. 30. [HTML/CSS] 3분 안에 웹사이트에 아이콘 넣기 - Font Awesome 5 문제 상황가끔 라이브러리를 활용하여 가져오는 경우 아이콘이 안뜨는 경우가 있다. 문제 해결아래 2개 사이트 중 한 곳에서 원하는 아이콘을 찾으면 된다.필자의 경우 이 글에서 font awesome을 사용하여 아이콘을 추가하려고 한다. w3schools : https://www.w3schools.com/icons/fontawesome5_icons_alert.asp W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and .. 2024. 9. 29. 이전 1 2 3 다음
