반응형 CSS35 [포트폴리오 페이지] 4단계: Contact 섹션 추가 4단계: Contact 섹션 추가4.1 Contact 섹션 HTML 작성index.html 파일에서 Contact 섹션에 내용을 추가합니다.index.html (수정된 부분) Contact Send 4.2 Contact 섹션 스타일링styles.css 파일에서 Contact 섹션에 스타일을 추가합니다.styles.css (추가된 부분)#contact { background-color: #f9f9f9; /* 배경색을 설정합니다. */ padding: 2em; /* 패딩을 설정합니다. */ margin-top: 2em; /* 상단 여백을 설정합니다. */ border-radius: 8px; /* 모서리를 둥글게 만.. 2024. 6. 16. [포트폴리오 페이지] 3단계: Projects 섹션 추가 3단계: Projects 섹션 추가3.1 Projects 섹션 HTML 작성index.html 파일에서 Projects 섹션에 내용을 추가합니다.index.html (수정된 부분) Projects Project 1 Description of project 1 View Project Project 2 Description of project 2 View Project Project 3 Description of project 3 View Projec.. 2024. 6. 16. [포트폴리오 페이지] 2단계: About Me 섹션 추가 2단계: About Me 섹션 추가2.1 About Me 섹션 HTML 작성index.html 파일에서 About Me 섹션에 내용을 추가합니다.index.html (수정된 부분) About Me 안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다. 저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.2.2 About Me 섹션 스타일링styles.css 파일에.. 2024. 6. 16. [포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16. [CSS] CSS 규칙 CSS 코딩 컨벤션과 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성과 유지보수성을 높일 수 있습니다. 아래는 CSS 작성 시 지켜야 할 주요 컨벤션과 규칙들입니다.CSS 코딩 컨벤션1. 파일 구조와 인클루드파일 분리: 스타일은 별도의 CSS 파일로 분리하여 HTML 파일에 링크합니다.주석: 코드의 목적과 구조를 설명하는 주석을 사용합니다./* styles.css *//* 기본 스타일 */body { font-family: Arial, sans-serif;}/* 네비게이션 스타일 */.navbar { background-color: #333; color: white;}/* 메인 콘텐츠 스타일 */.main-content { padding: 20px;}2. 들여쓰기와 공백들여쓰기:.. 2024. 6. 8. [CSS] CSS 예제(심화) 이번에는 고급 CSS 개념을 적용한 연습 예제를 만들어 보겠습니다. 이 예제에서는 CSS Grid와 Flexbox를 사용하여 반응형 레이아웃을 구성해보겠습니다. 또한, CSS 변수와 간단한 애니메이션을 추가하여 더욱 흥미로운 프로젝트를 만들어 보겠습니다.프로젝트: 반응형 포트폴리오 카드 레이아웃파일 구조index.html: HTML 파일styles.css: CSS 파일이미지 파일을 프로젝트 디렉터리에 저장하세요. (예: profile1.jpg, profile2.jpg, profile3.jpg)HTML 코드먼저 HTML 코드를 작성합니다. My Portfolio John Doe Web Develop.. 2024. 6. 8. [CSS] CSS 심화2 CSS 학습의 다음 단계는 CSS의 고급 기능과 기법을 배우고, 이를 통해 더욱 복잡하고 세련된 웹 디자인을 구현하는 것입니다. 아래에는 CSS를 더 깊이 이해하고 활용할 수 있는 고급 주제와 학습 계획을 소개합니다.1. CSS 전처리기 (Preprocessor)CSS 전처리기를 사용하면 CSS를 더 효율적으로 작성하고 관리할 수 있습니다. 대표적인 전처리기로는 Sass와 LESS가 있습니다.1.1 Sass (Syntactically Awesome Stylesheets)Sass는 CSS를 더 강력하게 만드는 전처리기입니다. 변수, 중첩(Nesting), 믹스인(Mixin) 등을 사용하여 코드 재사용성을 높일 수 있습니다.변수와 중첩 예제// 변수 사용$primary-color: #4CAF50;$secon.. 2024. 6. 8. [CSS] CSS 심화1 네, 다음 단계로 CSS를 학습할 때 다룰 수 있는 여러 주제가 있습니다. 각각의 단계에서 조금 더 복잡한 개념을 소개하고 이를 통해 여러분의 웹 디자인 기술을 더욱 향상시킬 수 있습니다.1. CSS 레이아웃CSS 레이아웃은 웹 페이지의 구조와 배치를 결정하는 중요한 기술입니다. 이 단계에서는 다양한 레이아웃 기법을 배워보겠습니다.1.1 FlexboxFlexbox는 요소를 한 줄 또는 여러 줄에 걸쳐서 배치할 수 있게 해주는 강력한 레이아웃 도구입니다.Flexbox 기본 예제 1 2 3 /* styles.css */body { display: flex; justify-content: center; align-items: center; .. 2024. 6. 8. [CSS] CSS 예제 그럼, 간단한 HTML과 CSS를 사용하여 연습할 수 있는 예제를 만들어 보겠습니다. 이번 예제에서는 간단한 개인 프로필 카드 레이아웃을 만들어 보겠습니다.HTML 코드먼저 HTML 코드를 작성합니다. John Doe Web Developer Hello! I'm John, a web developer with a passion for creating amazing web experiences. I specialize in front-end development. Twitter LinkedIn CSS 코드이제 HTML 요소에 스타일을 적용할.. 2024. 6. 8. [CSS] CSS 기본 CSS (Cascading Style Sheets)는 HTML 문서의 스타일을 정의하고 웹 페이지의 시각적 표현을 제어하는 데 사용됩니다. CSS를 단계별로 학습하면 점진적으로 개념을 이해하고 실습할 수 있습니다.1단계: CSS 기본 이해하기1. CSS 개념CSS: 웹 페이지의 스타일을 정의하는 언어입니다.선택자: 스타일을 적용할 HTML 요소를 선택합니다.속성(Property)과 값(Value): 스타일 속성과 그에 대한 값을 정의합니다.2. CSS 기본 구조CSS 코드의 기본 구조는 다음과 같습니다:선택자 { 속성: 값;}3. CSS 작성 방법인라인(In-line) 스타일: HTML 요소에 직접 스타일을 정의합니다.내부(Internal) 스타일 시트: HTML 문서의 This is a b.. 2024. 6. 8. 이전 1 2 3 4 다음 반응형