1. secondary-content

<설계>

#secondary-content : display- flex; width: 300px

.overlay {

display : flex;

flex- direction: column;

text-align: center;

2개의 아티클이 있는데 그 아티클 안에서도 내용설명 부분과 이미지를 수직 정렬해야되고

내용설명부분 안에는 소제목 내용 그리고 앵커 태크로 hover 상호작용할수 있는 버튼을 만든다

• :hover 란?

-포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다.

각 css와 등등 대충 해보았더니

여기서 문제 발생!!

.second-1 {
    background: #e8eced url("https://picsum.photos/500/300") no-repeat center;
}

백그라운드 이미지 사이즈 맞추고 싶었는데 그냥 100 100 으로 해서 그런듯

500 300 주니까

해결!!

2. CTA

설계

소제목 내용 활성화 버튼 flex 하고 디렉션으로 column 하기 ⇒ 위치 설정

디자인요소 소제목 밑에 색 밑줄

활성화 버튼 hover로 마우스 활성화 요소 넣기

1차 설계후

와이드랑 하이 마진 패딩을 안 주었더니 아주,,, 겹쳐버렸다.

---

❓❓❓❓❓

Q. display 블록과 인 블록의 차이?

지금 소제목 같은 경우 display를 block 요소로 하고 있음

그 이유가 무엇인가?

display를 flex 로 해서 많이 쓰지 않는가?

그럼 블록과 인블록은 언제 쓰이기에 사용하는 거지?

Inline

display 속성이 인라인으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치가 된다.

대표적으로 ⇒ spam , a, em 태그가 있다고함.

예를 들어, 여러 개의 인라인 요소를 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.

🚨 인라인 주의점 🚨

width 와 height 속성을 지정해도 무시됨

why?

해당 캐그가 마크업하고 있는 컨텐츠의 크기만큼만 공간을 차지하도록 되어있기 때문에

margin 과 padding 속성은 좌우 간격만 반영되고 상하간격은 반영이 되지 않는다.

block

display 속성이 block 으로 지정된 엘리먼트는 전 후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로

밀어내고 혼자 한 줄을 차지 함.

대표적으로 ⇒ div , p , h1 등이 있다고함

예를 들어, 여러 개의 블록요소 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

block 요소는 인라인 요소와 달리 width, height, margin, padding 속성이 모두 반영이 됨

Inline-block

display 속성이 인라인 블럭으로 지정된 요소는 기본적으로 인라인 요소처럼 전후 줄 바꿈 없이 한줄에 다른 요소들과 나란히 배치가 되지만, 블록 요소처럼 와이드와 하이 속성 지정 및 마진과 패딩 속성의 상하 간견 지정이 가능함.

⇒ 내부적으로 블로요소의 규칙을 따르면서 외부적으로 인라인 요소의 규칙을 다르게 되는 것

대표적으로 ⇒ button, input, select

인블록 요소는 해당 요소의 스타일을 display: inline-block으로 지정해줘야함.

인라인 블록을 이용하면 여러개의 요소를 한줄에 정확히

원하는 너비 만큼 배치 할수 있기 때문에 레이아웃에 활용할수 있습니다.

참고

참고로 <span>로 마크업된 엘리먼트가 inline 속성값을 가지고, <div>로 마크업된 엘리먼트가 block 속성값을 가지는 이유는 소위 user agent stylesheet라고 불리는 브라우저의 내장 스타일이 적용되서 그렇습니다. 이렇게 HTML 태그 별로 기본적으로 적용되어 있는 display 속성값은 원하는 값으로 CSS를 이용하서 자유롭게 변경이 가능합니다.

❓❓❓❓❓

Q. 마진을 오토로 한다는 것은 무엇인가?

margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정합니다. 즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 됩니다.

margin: 100; 처럼 숫자는 단위가 없어서 적용되지 않습니다. %나 px을 정확히 정해줘야 합니다.

auto는 가로 중앙에 배치한다는 뜻입니다. 그리고 자연스럽게 좌우 여백은 균등하게 배분됩니다.

ex) margin: 100px auto;

여기에서 100px은 위 아래 여백을 말하며, 좌우 여백은 균등하게 분배되어 element 가 정중앙에 배치 된다.

margin: 0 auto; 위 아래 여백 없이 가로 중앙에 배치되는 가장 기본적인 서식이 됨

width 설정

auto는 자동으로 사이즈를 설정해주는 것입니다.

CSS에서는 블록단위로 페이지 일부를 할당 받기 때문에 이미지에 background-color와 크기를 조정해도 해당 좌우에 할당된 빈 공간은 해당 블록이 가집니다.

그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능합니다. 

제대로 설정되어 있는지 확인해보고, 되어 있지 않다면

width 태그를 이용해서 가로 사이즈를 지정해주도록 합니다.

inline 속성 태그인지 확인

margin: auto;는 inline 속성에서는 적용되지 않습니다. inline 속성은 자기 자신 만큼의 영역값(width, height)을 갖기 때문입니다. 이러한 경우에는 3가지 중 하나를 선택합니다.

---

3. footer

<설계>

1차 설계

크게 div로 인포와 링크 묶어져 있고 두개

링크 안에 ul 이 3개 수평 정렬 있고 각각의 li 는 각각 수직 정렬

li의 첫 글자는 굵게!

footer {
    display: flex;
    margin: 0 auto;
    
}
#footer-info {
    display: flex;
    flex-direction: column;
    width: 190px;
    margin: 0 auto;
    
}

#footer-info p {
    padding: 0 0 20px 0;

}
.footer-link {
    display: flex;
    width: 190px;
    margin: 0 0 20px;
}
.footer-link ul {
    display: flex;
    margin: 20px auto;
}
.footlink li {
    list-style: none;
    flex-direction: column;
}
.com {
    font-weight: bolder;
}

🚨

인포와 링크가 수평 정렬이 되어야 되는데 안되어있음

그래서 wrapper 있는 클래스에 foot 이라는 클래스는 더 추가해줌

우선 위치 배열은 되었음

마진이랑 디자인적으로 추가를 해봅시다

.footer-link ul {
    display: flex;
    width: 150px;
    margin: 20px auto;
}
.footlink li {
    list-style: none;
    flex-direction: column;
    margin: 10px 0;
}

마진 줬다고 이렇게 바뀌어 버리네,,

이렇게 css를 다 주었다

❗❗❗❗❗❗❗

코드리뷰

1. secondary- content

view more 버튼 하나로 묶여있는데 묶어있지 않음

⇒수정

1. footer

인포 정렬 이상하게 됨

⇒수정

인포를 두개의 div로 묶어서 또 분리해주고

플렉스로 수평정렬 하였음

🔥🔥🔥🔥🔥🔥🔥🔥

웹 카피 하면서 느낀점

시멘틱 태그를 사용하여야 확실하게 코드를 보기가 쉽다

그리고 무작정 바로 코드를 친다고해서 좋은게 아니고 영역을 정하고

그영역에 따른 설계를 하고 치는 것이 중요하다.

확실히 레이아웃 이나 디자인적 마진 패딩 이런 부분이 엄청나게 부족하다

벤치마킹이나 웹 카피 라이이팅을 계속 해야되는 것 같다.

html 과 css 까지 하는데 2.5 일 정도 걸린것 같다.

내 목표는 1일 html 1일 css 하는 것 구조화 와 레이아웃 정렬하는 것을 익숙해지도록 해야되는 것 같다.

그다음에 자바 스크립트… 이제부터 시작이지 가자고!!