<타모디자인> 홈페이지 제작

 

 

 

 

유튜브에 좋은 강의가 있어서 주말에 짬짬히 해봤따 이게이게 또..주말은 ㅎㅎ

쉬는날이라...맘잡고 컴퓨터 앞에 앉기까지 쉽지 않긴 했는데 ㅋㅋ막상 해보니 재미도 있고

개인적으로 안풀렸던 것도 고민하고 이것저것 검색해보다가 풀려서 해피^__^ 재밌어 넘잼 매잼 !

만들면서 몰랐던 것들 여기에다가 메모하려고 한당  

수업에서도 배울거같긴 한데..그래도 안배울수도 있으니깐 !! 필기가 나라를 구한다....

 

 

 

---

 

display: Flex  
: block 속성을 한줄에 들어오게 하는 속성 (=float의 업그레이드 ver.)

border-radius 
: 모서리 둥글게

width:calc
: 전체에서 어떤 한 부분 구역값을 '마이너스'로 통해 자동으로 계산해주는 속성
ex) width가 1280px인 전체 부분에서 한 구역을 300px로 잡고 싶다
    width:calc(1280px - 300px);

justify-content : flex-start; (또는 end)
: flex 넣은 부분을 어느 방향에 붙여줄껀지 설정해주는 속성이다 start는 시작부분이고 end는 끝부분이다

cursor:pointer
:말그대로 커서가 올라갔을때 포인터 모양이 바뀌는 태그

태그:not(:속성)
:not(:속성) 속성 안에 들어가있는 요소만 빼고 효과를 적용해준다
(복잡하니까 정확한 설명 13:17초 부터▶ https://youtu.be/KyQb5Kzewn0 )

box-shadow
:박스 그림자 좌 우 번짐정도 색상 이렇게 배열된다

 

 

 

*구역 잡으면서 만들어나갈때 backgruoun-color 넣는 습관을 들여야 한다

 

*margin 중앙 배열시 한번에 위치 잡는 속성 순서는 <상-우-하-좌>이다. 

각각의 값을 px로 넣어줘도 되고, auto로 맞춰줘도 된다

 

*크롬 이용시 CT+숫자키 누르면 마우스 안쓰고도 브라우저 전환 가능

 

*margin 중앙 배열시 한번에 위치 잡는 속성 순서는 <상-우-하-좌>이다.

각각의 값을 px로 넣어줘도 되고, auto로 맞춰줘도 된다

 

*alt+shift+방향키 누르면 코드 아래로 쭉 한줄 복사 가능

 

*CT+alt 누르면 다중커서 가능

 

*li를 쓰고, flex로 가로 정렬한 부모요소에 있는 자식요소들 에게도 flex:1; 이런식으로 한자리씩

차지하라고 값을 넣어줘야 정상적으로 배치가 가능하다

 

*굳이 자식 요소를 안넣어도 position:relative만 써서 원하는 섹션을 움직일수 있다. 

>이렇게 되면 다른 태그 요소에 영향을 끼치지 않고 자신의 영역은 그대로 유지

 

*각 태그 안에 있는 요소에 > 이 부호로 차례대로 안거치고 그냥 바로 점프해서 들어가버리게 명령하는 법은,

스페이스바 한칸 공백을 띄워주는걸로 한다.

ex) <ul class="icons">

      <li>

     <div class="contents1_bold"> </div>

     <div class="contents1> </div>

         

     CSS

     .icons contents1{ }

   ㄴ ※icons라는 클래스 안에 있는 contents1 이라는 이름을 가진 애들을 모조리 순서 상관없이 적용가능

 

   *콤마 , 를 찍으면 태그 두개 한꺼번에 지정 가능

 

     

---

 

 

https://youtu.be/LFRTqu_0rmo

- YouTube

 

 

드디어 다만들었다~~ 사실 디자인과 개발에 끝은 없다지만..일단은 완성^^후후..

고래도 뿌듯하고만 헤헿

만드는동안 힘든건 거의없었고 완전 재밌게 만들었당

(근데 역시나 내가 디자인100% 하는건 족금 벅차긴 함...)

다른거 또 만들어 봐야지!!! 지치지 말자!!!