[회고록] 두번째 클론을 마치며
1.혼자 삽질해보기
여기까지 하는데 40분 걸림
처음에 내 생각대로 막 하다가 안 움직여서
클론할 홈페이지 구조도 보고
메뉴 상단바 효과는 검색도 해보고
그래서 겨우 헤더 위치 조정 완성ㅋㅋㅋㅋ... 어휴 쉽지 않구나
그래도 결과가 나오면 기분이 아주 좋고 재밌음 >,<
많이 하다보면 반복되니까 속도도 질도 올라가겠지
2. span과 div의 차이를 알게됨
이미지안에 텍스트를 넣으려는데 이렇게 옆으로 가버림
검색결과 div는 줄바꿈이 되지만 span은 옆으로 붙는 것을 알게됨.
span으로 해서 저렇게 된 것
3.text on image
position : absolute?
이거는 과거 방식인 것같아서
내가 배운 flex로 적용하려는데 잘 안되서 검색해봄.
근데 이미지를 index에서가 아니라 css에서 background-image로 하니까 됬음.
3-1 사진 색상 어둡게는
background-color: rgb(47, 48, 89);
opacity: 0.8;
하니까 됬음.
4. rem과 em차이
5. padding margin 적용 순서
padding margin 차이와 적용 순서를 확실히 알게됨
Margin은 외부여백 Padding은 내부여백
6. z-index란
창을 순서대로 배치하는 스타일.
z-index의 숫자가 높을수록 가장 상단(눈에 가깝게)에 배치되며
숫자가 낮을수록 하단(눈에서 멀게) 배치.
z-index는 음수 양수 모두 사용가능
header{
width: 100%;
height: 60px;
background-color: #fff;
/* 고정 헤더 */
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
7. flex box 사용시
header{
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.head-container{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
1.header등 해당 섹션에 높이 지정
2.header안에 flex box를 사용할 컨테이터 만들어 display flex 랑 높이 넓이 100%로해주고
3. justify 랑 align으로 안에 컨텐츠들을 정렬함
8. position
position : relative
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
9. 글자 간격 조절시
line-height: 1.5em;
word-wrap: break-word;
word-break: keep-all; -> 글자 칸에 알맞게 배열해줌
느낀점
많이 쳐보는 것이 중요하다는 것을 느낌.
혼자 스스로 빈칸에 작성하려니 시간이 굉장히 많이 걸렸는데
이렇게 헤매면 지쳐 포기 할 것같아 이미 있는 코드들을 보고 그대로 따라쳐보며 어떻게 적용되는지 바로바로 확인했다.
이렇게 반복하다보면 분명 눈에 익고 자연스레 익숙해질테니
더 많이 따라쳐보고 조금씩 작은 것들부터 스스로 클론도 해보고 해야겠다. 벌써 css공부한지 2달 정도가 되었다. 처음 시작할때 css 거의 몰랐는데 많이 나아지고 있는 것이 눈에 보여 기분이 좋다.
조금씩 꾸준히 홧팅 😝
Author And Source
이 문제에 관하여([회고록] 두번째 클론을 마치며), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dbal9357/회고록-두번째-클론저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)