본문 바로가기

프로그래밍3

[코드라이언] HTML/CSS 박스 쪼개기 padding, border, margin HTML과 CSS에서 사용되는 박스 모델(Box Model)은 HTML 요소를 사각형 박스로 처리합니다. 각각의 박스는 content, padding, border, margin의 4개의 영역으로 나뉩니다. HTML/CSS 박스란? 박스 만들기(쪼개기) 거대한 한 페이지를 여러 개의 영역으로 나누어서 그 영역에 글자나 사진 등을 넣고 싶을 때가 있습니다. 문서 작업을 할 때에는 단을 나누거나 표를 만들어서 원하는 영역에 글자나 사진 등을 배치하고는 합니다. HTML/CSS에서는 단이나 표 대신 박스를 만들어서 그 안에 내용을 집어넣습니다. 먼저 박스를 만드는 것은 쉽습니다. 태그를 이용합니다. 여러 개의 박스를 만들 때는 각 박스에 이름을 붙여줘야 다루기가 쉬워지겠죠? div class에 이름을 지어 주.. 2023. 3. 25.
[코드라이언] HTML/CSS (2) div 중앙정렬, div와 span의 차이점 코드라이언 일단 만드는 HTML/CSS 6강에 나오는 내용 및 추가 공부한 내용이다. div 박스 자체를 문서의 중앙에 배치하는 방법을 알아보고 div, article, section, span의 공통점과 사용상 차이점에 대해 알아보자. div 태그 div는 division의 앞 세 글자이다. 여러 요소를 한 번에 꾸밀 때 편의를 위해 div 태그를 사용하여 요소를 묶는다. 아래 코드 블록에서 div를 보면 div class에 mainbox라는 이름을 지정하고 요소와 요소를 div로 묶은 것이 보인다. 이제 CSS로 mainbox를 어떻게 꾸밀 것인지 써 주면 div로 묶은 모든 요소들에 해당 CSS코드가 적용된다. HTML 코드 김멋사 HTML/CSS 개발자 copyright CSS 코드 footer .. 2023. 3. 14.
[코드라이언] HTML/CSS로 이력서 만들기 (1) 일단 만드는 HTML/CSS by 이두희 코딩의 '코'자도 모르는 초보들이 들으면 좋을 강의이다. 차근차근 쉽게 알려 주시고 코드를 따라서 작성하며 결과물을 만들어가면서 듣는 수업이라 좋다. HTML/CSS를 배워야 하는 이유 가장 빠르고 간편하고 완벽하고 보편적인 시각화 도구 다른 언어와 콜라보레이션이 용이하다. 자바스크립트, 파이썬, 루비 같은 완전히 다른 성격의 언어와도 잘 섞여서 그 언어들이 표현하고 싶은 내용을 대신 표현해주는 좋은 도구이다. 결과물이 누구나 접속 가능한 웹 페이지이다. 문법과 로직이 간단하다. HTML과 인사하기 & 문서의 골격 HTML 문서는 여행 짐가방에 비유할 수 있다. 대제목을 tag라고 부른다. 골격 설명 // 보통 대소문자 구별 // 가장 큰 가방 // head와 b.. 2023. 3. 13.