: ) Web/웹 스터디38 CSS 기초 - <div> 이용하여 네모 상자 만들기 📌 네모상자 만들기 1. html 파일에서 태그 사용 네모박스 2. css 파일에서 네모상자 속성 정하기 backgound-color = background margin (상하좌우 여백) padding (안쪽 여백) border (테두리) (두께 / solid, dotted / 색깔) border-radius (테두리 둥글) width, hight 등등 .box { width: 100px; hight: 100px; background-color: cadetblue; margin: 30px; padding: 5px; border: 4px solid black; border-radius: 15px; } 가운데 정렬은 이미지 가운데 정렬과 동일 .box { width: 100px; hight: 100px; b.. 2023. 11. 9. CSS 기초 - CSS 파일 사용하기, CSS selector 우선순 CSS (Cascading Style Sheet) 스타일 보관 파일 📌 CSS 파일 사용하기 1. css를 쓸 html파일 → 안에 밑의 내용 추가 2. css 파일에 style 작성 후 작명 가져오고 싶은 style속성들 .css파일에 가져오기 .profile { font-size: 30px; font-family:'Times New Roman'; color:darkolivegreen; letter-spacing: normal; text-align: center } .profile이 이름 profile은 하나의 클래스가 됨. ✅ class sector 3. html파일에 적용 class=”클래스 이름” css 적용한 글자 *VSCode는 화면 분할해서 css, html 편집하면 편함 🔎 class 특징.. 2023. 11. 9. HTML 꾸미기 - 자기소개 화면 만들기 📌 HTML 속성들을 이용해 자기소개 화면 만들기 Minji Lee ¡Hola! Buenos tardas. Soy coreano y soy muy amable. ¡Mucho gusto! 2023. 11. 9. HTML 꾸미기 📌 HTML 꾸미기 style=” 속성; 속성; … 속성 ” 속성 간 ;로 구분 📌 img 이미지 스타일링 이미지 너비 width 이미지 여백 margin-left/top/bottom/right 🗒️이미지 너비, 여백 적용 이미지 가운데 정렬 display : block margin-left : auto margin-right : auto 🗒️이미지 가운데 정렬 📌 글자 스타일링 글자 사이즈 font-size px(-픽셀) / vx / %(-부모 사이즈에 비례) 폰트종류 font-family : ‘gulim‘ 색상 color: red / #FFFFFF 자간 간격 letter-spacing: 5px 글자 가운데 정렬 text-align: center 일부 글자만 스타일링 테그로 감싸기 (별 뜻 없는 테그).. 2023. 11. 9. HTML 기초 복습 - 원하는 페이지 만들어보기 [전체 코드] 스페인어 배우기 ¡Hola! 안녕 ¡Mucho gusto! 반가워 Soy coreana y soy muy amable 나는 한국인이고 나는 매우 친철해 스페인 정보 확인하러 가기 숫자 세기 Uno Dos Tres Cuatro Cinco Seis [결과 화면] 2023. 11. 8. HTML 기초 - 특정 글자 클릭 시 링크로 이동하기 [핵심코드] ¡Mucho gusto! 이동하기 *이동하기 글자 클릭 시 링크로 이동 [전체코드] ¡Hola! ¡Mucho gusto! 이동하기 버튼 항목1 항목2 [결과 화면] *'이동하기' 클릭 시 네이버로 이동함 2023. 11. 8. 이전 1 ··· 3 4 5 6 7 다음
