본문 바로가기

HTML+CSS

 (30)
html/css #10-position 어떤 요소의 위치를 움직일 때 , margin을 직접 움직일 수 있지만 (공간 자체가 달라짐) 공간자체가 달라지면 다음요소에게 방해를 줄 수 있기 때문에 공간은 그대로 두고 시각적으로만 움직이는 position을 사용할 수 있다. opacity position 초기값 : static (정적인) relative : 자기 자신을 중심으로 이동한다. 현재 내 위치에서 이동한다. / left, right, top, bottom 등으로 위치를 줄 수 있다. * relative는 공간은 그대로 두고 시각적으로만 움직인다. * 빨간 네모 상자는 margin 공간이고, 시각적으로만 움직인다. absolute: Containing block (기준으로 요소 이동한다 최초 부모 기준점 : viewport의 왼쪽 상단 최초..
html/css #8-flex-direction flex-direction : column이 되면 기존에 row일 때 justify-content와 align-items의 개념이 반대로 된다고 생각하면 된다. 상하 정렬 : justify-content 좌우 정렬 : align-items row -> 열 , column -> 열에 해당하는 값(행) flex-direction 훨씬 더 자유도 높게 배치할 수 있다. row : 가로열 row-reverse : 가로열 반대를 기준으로 배치 column: 세로로 배열한다. flex-direction:cloumn 을 유의하자 우리가 아는 가로 세로 상식이 바뀌니까 유의하자 ex) flex-basis는 이제 더이상 width의 개념이 아니고 height가 됨 *참고 : 상하 gap을 주기 위해 flex-direct..
html/css #7-1 동물 소개 페이지 flexbox로 중앙정렬하기 [레이아웃 고민] 1. Flexbox container를 어디에 줘야 하는가? ㄴ Flexbox의 영향을 직접적으로 받지 않는 곳에 줘야 한다. ㄴ 이유 : 1자로 정렬할 것이기 때문에! ㄴ 결론 : body 쪽을 부모로, Flexbox를 주자 [레이아웃 고민2] 2.flexbox를 정 중앙에 위치시켜야한다. 2-1. 동물 이미지의 시.작.점 을 옮겨줘야 한다. ㄴ자식클래스에 justify-content: center; 값을 주면 부모인 body를 기준으로 시작점을 중간으로 옮길 수 있다. 2-2. 동물 이미지를 상하 중간으로 옮겨줘야 한다. 1) 부모인 body의 height를 100vh 로 작성한다. (100% viewport height) 2) 그 후에 align-items: center; 를 통해..
html/css #7-felxbox2 백그라운드에서 이미지 조정하기 background-position: right bottom ; background-origin: content-box; 백그라운드 이미지 스프라이트 ㄴ px 절대값으로도 이동 가능하다. ㄴ이미지의 위치를 기준으로 이동한다. .actions a.view{ background-position: left top; } .actions a.like{ background-position: center top; } .actions a.share{ background-position: right top; } flex-basis 의 크기보다 큰 자식 요소가 있을 때 ㄴ flex basis: 200px; ㄴ 이미지 자식 요소가 이보다 큰 상황이라고 했을 때, 부모의 크기도 함께 늘려버릴 수..
html/css #6-line-height 심화, flexbox inline-block은 텍스트 기준의 base line을 기준으로 정렬되어 있다! 따라서 line-height를 이동하면 개체들이 다 함께 이동하게 된다. vertical-align을 통해 baseline 고정하기 vertical-align: top; value 값은 top, bottom 등을 줄 수 있다. top -> 상단 기준으로 baseline 고정 bottom -> 하단 기준으로 baseline 고정 ex) vertical-line:bottom :아래쪽을 고정 *참고 : 하이픈 규칙 list-items ( '-'하이픈은 자식 요소들의 클래스 이름을 지을 때) list_red ( '_'언더바는 종류, 타입들의 클래스 이름을 지을 때) flexbox 직계부모를 컨트롤하는 컨셉 가로배치하고 싶은 대상..
html/css #5-셀렉터 우선순위, a태그, line-height 부모에 hover 되었을 때 자식요소가 바뀌도록 할 수 있다. div{ } .부모:hover div{ /*부모에 hover되었을 때 변경 요소*/ } object-fit: cover; object-position : center 00px; 셀렉터 우선순위 RED GREEN BLUE ORANGE GRAY ㄴ .red{} 안의 color과 border-color은 우선순위에 의해 적용이 되지 않는다. ㄴ 우선순위가 동일하다면 하단에 적힌 속성이 우선 적용됨 contents 위 코드에서 .wow:hover 안의 코드는 동작하지 않는다. 그 이유는 아래 .wow.wow 코드와 우선순위가 동일하기 떄문, 상위에 있으면 해당 코드가 씹힌다. 다중 클래스 div.box .box .box.wow.wow2 div.box..
html/css #4-프로필 사이트 index 2 (section, 마진병합, 오퍼레이터) div 말고 section 사용하기 ㄴ section에 클래스를 작성한다. *내부 컨텐츠 명으로 클래스명을 작성하면 확장성이 떨어진다. => 템플릿으로 생각해야한다. (컨텐츠는 언제든 변경될 수 있다. ) => 시각적인 요소로 클래스명을 작성해 section 1 section 2 section 영역 확인하기 (box-shadow) box-shadow: inset 0 0 20px blue; inset으로 사용하면, section 내부로 그림자가 배치되기 때문에 공간을 확인할 때 사용할 수 있다. section 마진 병합 현상 마진 병합 현상이 일어나는 조건 1) 블록 레벨끼리만 가능 (인라인-블록X) 2) 상단과 하단만 겹침 현상 나타난다. *section의 상위 셀렉터인 contents의 마진이 늘어나지..
html/css #3-1 마진 병합 현상 css 마진 병합 현상이란, 주어진 마진의 상하단 병합이 일어나는 현상을 말한다. 해당 현상은 의도된 바이며 아래와 같이 이해할 수 있다. Section#1에 margin: 20px Section#2에 margin: 20px 그렇다면 S1과 S2가 만나는 빨간 화살표 부분에서는 총 margin이 40px 이 되어야 맞지만, 자동으로 마진 병합 현상이 일어났다. 마진 병합 현상의 조건 1. 인접해있는 Block 요소 끼리만 일어난다. 2. 상하단만 해당사항이 있다. (좌우측x) 언제나 마진 병합 현상이 이로운 것은 아니며, 곤란한 상황이 일어날 수 있다. 부모에게 padding과 border를 1px 정도씩 줘서 의도적으로 상황을 회피할 수 있다. 부모에게 overflow: hidden;을 주면 해당 현상..

티스토리툴바