primavera

여러 개의 컬럼을 만들어서 읽기 쉽게 한다. column-count와 column-width 2개를 동시에 사용할 수 있다. 200px 이상이면서 4개 이하의 컬럼을 만든다. 9: column-gap 컬럼과 컬럼 사이의 간격을 설정한다. 10: column-rule-style 컬럼의 간격에 선을 표시한다. 이 경우는 dashed(절취선). 11: column-rule-width 선의 굵기 12: column-rule-color 선의 색 15: h1 태그는 컬럼의 영향을 받지 않도록 만든다. 주로 제목을 표시할 때 사용한다.

레이아웃 만들 때 사용 컨테이너, 아이템 속성이 구분되어 있다. 자식과 부모가 있어야 한다! *div는 block level element. 화면 전체를 사용한다. [container 속성] display:flex 부모 요소에 display:flex를 설정함으로써 시작한다. [container 속성] flex-direction 디폴트 값은 row임. # 이 둘의 차이는 뭘까? height 값을 주고 column-reverse를 하면 차이가 생긴다. [item 속성] flex-basis 크기를 지정 [item 속성] flex-grow 아이템으로 컨테이너 채우기. 여백이 없게 하기 flex-grow 0은 변화가 없음. 1로 설정하면 컨테이너 공간을 각각의 자식 요소가 5로 공평하게 나눠서 가짐. cascad..

상대 위치(relative position) 화면상에 어디에 위치할 것인가. 각 요소의 위치 결정. 이렇게 만들어둔 상태에서 me를 왼쪽, 오른쪽으로 이동해보자. left, right, top, bottom으로 위치를 이동시킬 수 있다. 라인 10이 중요하다. position: relative가 없으면 left, top 값이 무시된다. css의 각 요소는 기본적으로 static이기 때문이다. 절대 위치(absolute position) left, right, top, bottom을 써주지 않으면 기본값에 위치한다. absolute일 때의 기본값은 해당 요소가 있을거라 기대되는 곳이다. absolute를 지정하면 me는 더이상 parent의 자식으로 보지 않는다. 따라서 컨텐츠 크기도 줄어든 것이다. 자식..

h1 2개의 마진이 겹친다. 만약 둘의 마진이 다르다면 큰 값이 두 태그 사이의 거리가 된다. * 부모, 자식 요소 사이의 마진 겹침 현상 부모 시각적 요소가 없으면, 부모의 마진값과 자식 마진값 중 큰 것이 자식의 마진값이 된다. * 태그의 시각적 요소가 없으면, 그 태그의 margin-top과 margin-bottom 중 최대값이 전체 margin이 된다..

태그의 부피감을 결정한다. 태그는 박스에 둘러싸여 있다. padding은 테두리와 컨텐츠 사이의 간격을 말하고, margin은 태그와 다른 태그 사이의 간격이다. padding과 margin을 각각 (20, 20) (40, 20) (20, 40) (40, 40) 으로 설정했을 때의 결과이다.(단위는 px) 블럭모델은 보통 화면 전체를 사용한다. 화면 전체를 사용하지 않게 하려면 width 값을 주면 된다. 근데 이 박스 모델이 inline element에서는 좀 다르게 동작한다. padding과 margin은 적용되는데, width 값은 무시한다. box-sizing div 태그에 width를 150px로 똑같이 줬는데 위와 아래의 크기가 달라보인다. width는 컨텐트 영역의 크기를 말하는거기 때문이다..

상속 부모의 스타일을 자식들이 물려받는 것 -> 코드를 효율적으로 짤 수 있다. css의 모든 속성이 상속되는건 아니다. 예를 들어서, color 상속됨. border는 상속되지 않음. 전자는 상속되는 편이 좋고, 후자는 상속되지 않는 것이 좋아서 그렇게 설정됨. css의 설명서를 봐야 알 수 있음. 8줄에서 html에 적용한 color 속성이 모든 자식들에게 적용된다. 하지만 10줄에 설정한 border는 body에만 나타나고 body의 아래에 있는 자식들에 대해 border가 그려지지 않는다. cascading css는 cascading style sheet의 약자. cascading이 css에서 중요하다! 우선순위가 필요하다. 기본규칙: 웹브라우저 < 사용자 < 저자 하나에 태그에 css가 중첩되어..

font-size 글꼴의 사이즈를 설정하는 속성 단위가 중요하다. px, em, rem가 있는데 현재는 거의 대부분 rem을 사용한다 px와 rem의 차이점은 사용자의 설정에 따라서 글꼴 사이즈가 바뀌는지의 여부이다. 사용자가 브라우저 글꼴 크기를 바꿨을 때, rem로 설정하면 글꼴 크기가 따라서 바뀌지만, px로 설정하면 바뀌지 않는다. color 글꼴의 색은 3가지로 표현할 수 있다. 1. 색 이름 2. 16진수 3. RGB h1{color:aliceblue} h2{color:#00FF00} h3{color:rgb(244, 101, 161)} CSS Colors W3Schools offers free online tutorials, references and exercises in all the ma..

어제 완성한 웹을 css로 이쁘게 꾸며보려고 했다. 예전에 css를 배운 적이 있어서 잘 할 수 있을거라고 생각했다. 근데 진짜로 전부 다 까먹어버려서 새로운 강의를 듣기로 했다. 생활코딩님께서 유튜브에 올려주신 강의이다. CSS 수업 www.youtube.com 저번에 배운 걸 전부 다 까먹은게(그다지 오래 지난 것도 아닌데.. 작년 3월~6월에 공부함) 정리를 안 해서 그런 것 같아서 이번엔 공부한 내용을 블로그에 다 정리하려고 한다. 내가 모르는 부분, 중요한 부분을 중심으로 정리하고자 한다. 그럼 시작! in-line 별도의 css 파일을 만들지 않고 html 파일 안에 스타일 코드를 작성하는 것이다. 라인5과 라인9의 color:red 부분이 css 코드이다. 선택자(selector)와 선언(d..

getCurrentPosition은 두 개의 인자를 필요로 한다. 첫 번째는 위치 정보를 얻어오는데 성공했을 때 실행하는 함수이고, 두 번째는 실패했을 때 실행하는 함수이다. 위의 코드를 실행했더니 왼)이런게 뜸! 와우 신기하다!! 오)허용 누르니까 콘솔 창에 내 위치 정보가 뜬다. 위도 경도까지 다 뜨는게 신기했다 https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local ..

이제 완성까지 얼마 남지 않았다. 투두리스트랑 날씨만 하면 된다! index.html 일단 html 파일에 위 코드를 적는다. - ul의 밑에 li는 쓰지 않는다. 일단 처음에는 추가한 to do list가 없을 것이기 때문에 비워두기 위해서이다. 저번 포스팅에서 배경화면 만든 것과 똑같이 js에서 요소를 추가할 것이다. - 한가지 더 주목할 게 있다. form을 사용한 것. form을 쓰면 form이 제출될 때 자동으로 새로고침을 하는 기본동작이 있었다. (greeting에서 함) 아 새로고침을 막기 위한 코드를 짜줘야 한다. submit할 때 해야할 것 1. 새로고침 막기 2. input에 적힌 text 저장하기 3. 제출한 후 input 비우기 to do list 만들기! 어쩌구 저쩌구 이렇게 만들..