primavera

- 이미지 삽입할 때 사용하는 기법. 자연스럽게 만들어줌. - layout을 만들 때도 사용한다. float:left를 적용하면 오른쪽과 같이 나타난다. 사진 오른쪽에 글이 적힌다. 두번째 p 태그는 사진 옆에 보이지 않고 사진 이후에 보이게(기본) 하려면? 수정 전: 이미지에 float:right을 주게 되면 이미지 이후에 나오는 모든 요소에 대해 왼쪽에 보여진다. 그 설정을 피하고 싶으면 그 요소에 clear:both를 써주면 된다. 수정 후: clear에 올 수 있는 속성의 값으로는 both, left, right가 있다. clear:right는 right float를 없애는 것, cler:left는 left float를 없애는 것이다. both는 둘 다 없애는 것. holy grail layout..

미디어(컴퓨터, 휴대폰 등등)의 상태에 따라 다른 디자인을 보여줌. 미디어에 적합한 디자인을 보여준다. 반응형 디자인 4: 모바일에서도 반응형 디자인을 사용할 수 있게 함. 결과: holy grail layout과 결합 초기 코드: 생활코딩 html css javascript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda i..

여러 개의 컬럼을 만들어서 읽기 쉽게 한다. 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..