• css
• html
• git

1. 🚨🚨🚨🚨🚨🚨🚨

practice 파일에 page 파일 만들어서 blog 해보려고 하는데 error 남 ^^

Error: This command is not available when running the Angular CLI inside a workspace.

오류: 작업 공간 내에서 Angular CLI를 실행할 때는 이 명령을 사용할 수 없습니다.

Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more

details and how to change this setting, see https://angular.io/analytics. (y/N)

이 프로젝트에 대한 가명 사용데이터를 앵귤러 팀과 공유하시겠습니까?

구글의 개인정보 보호정책에 있는 구글에서 더 많은 정보를 얻으세요

Fix: This command is not available when running the Angular CLI outside a workspace.

ng serve 하고 저런 질문 떠서 y 함

계속적인 도르마무,,

정답 >> 해결방법

$ ng g c pages/blog

g ⇒ generate

Generates and/or modifies files based on a schematic.

도식을 기반으로 파일을 생성 및/또는 수정합니다.

c ⇒component

Creates a new, generic component definition in the given project.

지정된 프로젝트에서 새로운 일반 구성요소 정의를 만듭니다.

감사합니다. 진짜ㅠ

---

BLOG

header

로고

⇒ h1

카테고리

⇒ nav 태그

난 여기서 ul li 써서 display : flex 해서 정렬하려고 함

하지만 이분은 nav 태그씀

❓❓❓

태그는 **다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용**합니다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.

저 카테고리를 통해 다른 새 페이지로 이동을 하니 nav를 쓴다고한다

이런 태그들은 시멘틱 태그라고 하는데 시멘틱 태그를 잘 쓰라고 하시던데 그이유는?

❓❓❓

이를 통해 사람들은 코드를 읽는 것이 훨씬 쉬워지고, 검색엔진 즉, 기계 입장에서는 콘텐츠를 더 쉽게 이해할 수 있습니다. 따라서 SEO (검색엔진최적화) 성능을 더욱 향상할 수 있습니다.

결국 가독성이다. 점점 프젝이 커지고 많은 사람들이 함께 할수록 나만 알아볼수 있는 코드가 아니라 모두가 다 이해하고 활용할수 있는 코드여야한다.

💥

헤더치다가 알게 된점 nav 태그 안에 어쨌든 ul li 써서 해야 되긴 함

Hero image

[ id, class, name 속성의 차이점]

id 와 class

id 와 class는 자유롭게 짓되, 숫자로 시작해서는 안된다.

id는 #아이디로, class는 .클래스명으로 제어한다.

class는 같은 이름으로 붕복 사용이 가능하며, 여러 값을 줄때는 띄어쓰기로 구분하여 사용할수도 있다.

ex) class = “first second”

난 div class = “heroimage” 였음 여기선 id로 하려고함

hero image

배경이 이미지 이고, 이미지 안에 글자 있음

글자가 두줄로 되어있고 첫줄이 굵음

밑에는 버튼누르면 다른 창으로 갈수 있도록 링크 연결 되어있음

3.features

안에는 이미지 소제목 설명이 써져있음.

ul li으로 사용하였음

각각의 목록 항목으로 css를 사용해서 목록항복을 왼쪽으로 띄워 수평으로 표시

작성하다가 계속적으로 반복되던것을 보고 발견함!!

🚨🚨🚨🚨🚨🚨

섹션 맨처음부터 등장하는 것

<div class="wrapper">

이제서야 봄 왜 이게 모든 섹션에 있지? 이걸 굳이 사용하는 이유가 뭐지?

wrapper 란?

요소그룹이 다른요소 안에 감싸져 있거나 포함되어 있음을 의미

-body를 사용해도되는데 굳이 왜?

작업이 실용적 x → 하위항목이 경계를 벗어나는 것을 방지

페이지 wrapper 필수인가요?

페이지 래퍼를 사용할 때,디자이너나 개발자가 알고 있어야 하는 많은 이점이 있습니다. 다음은 몇 가지 이점입니다.콘텐츠의 가독성을 높입니다.

래퍼가 없으면 텍스트 및 이미지와 같은 콘텐츠가 늘어나서 화면 전체 너비를 채울 수 있습니다.
작은 화면의 경우 괜찮을 수 있습니다. 
그러나 큰 화면의 경우 이는 매우 성가신 일입니다.
디자인 요소를 그룹화하는 것이 간격을 추가하는 데 더 좋습니다.
디자인 요소를 열로 나누는 작업은 래퍼 없이는 쉽게 수행할 수 없습니다.

출처:

https://itchallenger.tistory.com/908

[Development & Investing:티스토리]

🚨🚨🚨🚨🚨🚨

1. Primary-content

소제목 설명과 영상이 포함되어 있음

❓❓❓

<article>

문서, 페이지, 애플리케이션, 또는 사이트에서

독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역

으로 사용됩니다.

예를 들어, 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있습니다.

⇒ 이미지와 영상 넣는 것

<a href="#"><img src="images/video-placeholder.jpg" alt="video placeholder" /></a>

secondary-content

오른쪽에 이미지 있고

왼쪽에 소제목과 설명 밑 더보기 버튼 있음

두가지의 아티클 태그를 쓰는 한 아티클 안에 설명이랑 이미지가 같이 있어야함 그럼 여기서 문제!!

이미지랑 설명을 따로 섹션을 나눠야 되나 아니면 폼으로 따로 작성을 해야되냐 그것도 아니면 그냥 두개다 한개로 쓰는데 클래스를 다르게 해야되냐 ..

우선 폼이랑 섹션이 뭐가 다른지 부터 알아보자

태그

＜section＞ 요소는 서로 관계 있는 문서를 분리하는 역할을 함.

주로, 문서를 다른 주제로 구분짓기 위해 사용됨

HTML의 2번째 이야기

웹 문서를 만들때 ~~

...

폼의 뜻은 정보를 기입하는 부분이 있는 문서를 뜻한다. 따라서 HTMl에서 form은 사이트의 방문자에게 정보를 수집할 수 있는 태그들이다. HTML에서는 다양한 유형의 태그들로 사용자로부터 정보를 수집한다.

form의 동작 방식

(1) 사용자가 폼을 입력한 후 submit하면 정보가 웹서버에 전송된다.

(2) 웹서버는 정보를 처리하고 대부분 정보는 데이터베이스(DB)에 저장된다.

(3) DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.

(4) 서버는 수신한 정보를 브라우저로 보낼 새로운 페이지를 만든다.

• 태그에는 action 속성과 method 속성 id 속성을 쓸 수 있다.

찾아보니 그냥 아에 다른 거였음….ㅎㅎ

여기 웹사이트에서는 그냥 앵커 안에 이미지 태그 넣어서 클래스로 하였음.

근데 여기서 특이점

💥💥💥💥💥💥💥

기능 섹션과 마찬가지로 각

을 왼쪽으로 띄워 수평으로 표시합니다. 이 섹션에서는 일부 인라인 스타일을 사용했다는 것을 알 수 있을 것입니다. 일반적으로 이렇게 하지는 않지만, 이 경우에는 의 배경 이미지가 스타일링이 아닌 콘텐츠로 간주되므로 CSS가 아닌 HTML에 포함되어야 합니다.

배경이미지를 html 에서 넣어버림

난 이미지태그와 class를 사용해서 display flex 해서 수평 정렬하려고 했는데…

<article style="background-image: url('images/article-image-1.jpg');">
            <div class="overlay">
                <h4>Secondary Content</h4>
                <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo a nibh dignissim tincidunt nam.</small></p>
                <a href="#" class="more-link">View more</a>
            </div>
        </article>

너무 예전 방식 같기도한데,,,

우선 난 그냥 이미지를 넣음

<article class="second-1">
                    <div class="overlay">
                        <h4>secondary-content</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero
                            interdum,
                            id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
                        <a href="#" class="view-more"><button>View more</button></a>
                    </div>
                    <a href="#"><img src="#" alt="#" class="se-over-1"></a>
                </article>

➡️➡️➡️➡️➡️➡️ 지켜보면서 차이를 봐봐야 할듯

6.CTA

CTA란?

CTA에 대해 들어보셨나요? CTA는 웹 사이트 내 목표를 달성하기 위해 고객에게 '행동'을 유도하는 버튼이나 배너를 가리킵니다. 영어 Call To Action을 줄여 CTA라고 표기하며 보통 '행동 유도 버튼' 또는 '목표 달성 버튼'이라고 해석되기도 합니다.

그냥 h2 설명 스타트 버튼?

7. Footer

footer-info ⇒ 글자 클릭하면 페이지로 들어가게

기본적으로 다 링크가 들어가야한듯?

1차적으로 html 은 다 작성 함

이제 css ㄱ