본문 바로가기

전체 글

(17)

[CSS] 상단바 / 하단바 화면에 고정시키기 화면 상단에 헤더 고정시키기position: fixed 로 고정시키기헤더를 고정시킬 위치 지정하기 - 예) top: 0헤더 영역이 화면에 가로로 꽉 차게 하기 위해 width: 100% 적용** width: 100% 을 안했더니 상단바 안의 내용물들이 이상한 위치로 이동하고 그래서 해결하려고 한참을 해맸다.상단바가 화면을 꽉 차게 하려면 꼭 width: 100% 주기!!

노마드코더 코코아톡 클론코딩 9일차 #6.10 Navigation Bar part Onenavigation bar는 보통 내부에 ul, 또 그 안에 많은 li들로 구성되어 있고 각 li들은 링크를 포함한다. 검색엔진 구글도 navigation을 찾아서 ul의 li안에 있는 링크들을 가져오게끔 만들어져 있다. >> VSC의 단축키로 navigation의 하위 요소까지 한번에 자동 완성 시킬 수 있다.nav>ul>li*4 : nav 안에 ul 안에 li가 4개 #6.11 Navigation Bar part Two어떤 요소를 항상 같은 위치에 고정시키려면 : position: fixed;하단바의 위치를 고정시켰더니 이렇게 마지막 아이콘이 사라졌다. 이럴 때 사용하는 마법의 문장!box-sizing: border-box; → 아이콘들이 한 줄에..

노마드코더 코코아톡 클론코딩 8일차 #6.6 Sign Up Screen part Three- 내가 설정하지 않아도 브라우저가 기본적으로 적용하는 margin → 리셋 CSS을 이용해 없앨 수 있다. 리셋 CSS : 대부분의 태그에 margin:0, padding:0, border:0 등을 가진 css 파일 - 상태바는 모든 화면에 존재하므로 status-bar.css 파일을 따로 분리하여 저장하는 것이 좋다. #6.8 Log In Form part Two- not() : 뭔가가 적용되는 걸 원하지 않을 때 사용하는 속성. "이 것을 제외한 나머지에 적용하고 싶어요" - color: inherit → 부모로부터 색상을 물려받음 #6.9 Recap and Formsform의 두가지 속성 - action, method - action : 어떤 ..

노마드코더 코코아톡 클론코딩 7일차 #6 Cloning Time.DS_Store는 맥os나 윈도우에서 만든 보이지 않는 임시파일이다..gitignore는 무시하고 싶은 파일 이름을 기록하는 파일이다. .gitignore에 .DS_Store을 쓰면 git에서 보이지 않는다. 대부분의 웹 서버가 디폴트로 index.html을 가장 먼저 찾아보도록 설정되어 있다. vsc에서 ! 만 쳐도 다음과 같이 코드가 작성되도록 단축키가 설정되어 있다. 너무 흔한 이름은 헷갈리기 때문에 긴 이름을 적어주는 것이 좋다. 나중에 알아보기 쉽게 '부모요소__자식요소' 라 이름 짓는다. #6.2 BEMBEM (Block Element Modifier): 좀 더 쉽게 읽히는 CSS를 가지도록 하는 규칙(장점) - 소스코드를 더 쉽게 알아보고 사용할 수 있음 ..

노마드코더 코코아톡 클론코딩 6일차 #5.0 What is Git코드가 긴 경우에는 파일의 히스토리를 알고 있어야 한다. 처음에 뭘 작성했는지, 나중에 뭘 추가했는지, 변경 내역 등을 알고 있어야 하는데 이럴 때 git을 사용한다.- git은 텍스트 파일뿐만 아니라 excel, image, song 등등 다른 파일 형식에도 사용할 수 있다. (git은 파일을 binary format으로 인식하기 때문이다.)- git은 어떤 파일이든 수정된 내역을 알 수 있다.즉, git은 파일을 계속 추적하는 것이다. github에는 기본적으로 변경내역을 업로드한다.git ≠ github git은 파일의 변경내역을 계속해서 추적해주는 version control system이고, github는 파일 내역과 파일들을 올려주는 공간이다. #5.1 What ..

노마드코더 코코아톡 클론코딩 5일차 #4.0 - 4.1Transitions4장에서는 고급 CSS를 배울 것이다. animation, transition, transformation 등 Transition : 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법* transition 속성은 state가 없는 요소에 붙여야 한다. → 애니메이션을 주고 싶은 요소가 state에 있어야 변화가 생긴다. ease-in function : 브라우저에게 애니메이션이 어떻게 변화하는지 말해주는 것- linear : 시작부터 끝까지 일정한 속도- ease-in : 시작과 끝이 빠름- ease-out : 시작과 끝이 느림- ease-in-out : 시작이 빠르고 끝이 느림 https://matthewlein.com/tools/ceaser Cea..

노마드코더 코코아톡 클론코딩 4일차 #3.8 Classes #3.9 Inline Block #3.10 Flexbox Part Oneflexbox: box를 어디든 자유롭게 둘 수 있다.창 크기에 따라 자동적으로 content의 크기가 변한다. >>flexbox를 사용할 때 지켜야할 3가지 규칙1. 자식에게는 명시하지 않고 부모에게 명시하여 flex container로 만든다. = 자식들을 움직이려면 부모에게만 말하면 된다. display: flex; 2. 주축(main axis)과 교차축(cross axis)flex container는 두 개의 축을 갖는다.*주축은 기본값이 수평, 교차축은 수직으로 설정되어 있다.justify-content는 주축을 따라 움직인다.align-items는 교차축을 따 움직인다. ex) body가 heig..

노마드코더 코코아톡 클론코딩 3일차 #3.0 How to Add CSS to HTML1. 같은 html 파일에 html 코드와 css 코드를 놓는 방법 : 안에서 #3.2 What Does Cascading MeanCSS = Cascading Style Sheet ; 브라우저가 css코드를 읽을 때 위에 있는 코드부터 차례대로 읽는다.->같은 대상을 가리키는 코드가 여러개 있다면 가장 마지막에 나오는 코드가 적용된다. #3.3 Blocks and Inlines앞에서 배웠던 box 성질 (div 등..)은 옆에 아무것도 올 수 없다.하지만 box가 아닌 것들은 옆에 다른 것이 올 수 있다. >>옆에 다른 요소가 못 오는 것을 block이라 하고 다른 요소가 올 수 있는 것을 inline이라고 부른다.아주 작은 글이나 링크, 그림 등등이 i..

목록 더보기

티스토리툴바