웹/CSS (15) 썸네일형 리스트형 반응형 디자인과 미디어 쿼리에 대해 알아보기 안녕하세요 이번 포스팅은 반응형 디자인과 미디어 쿼리에 대해 알아보겠습니다. 여기서 나오는 내용은 미디어 쿼리에 대해 상세하게 적은 게 아니라 반응형 디자인이 무엇인지 미디어 쿼리가 무엇인지 대략적으로 적어 둔 것입니다. 반응형 디자인이란? ⇒ 사용하는 기기의 화면 크기에 따라 반응하는 웹사이트 만들기 다양한 화면크기와 다양한 기기에 따라 페이지가 변형되도록 만드는 것 CSS , 스타일 시트에서 적용할 수 있다. 미디어 쿼리를 이용해서 반응형 디자인을 만들 수 있다. 미디어 쿼리 예시) 반응형 CSS Flex 박스2 - (Align-items, align-content, align-self, Flex-Basis) 안녕하세요 이번 포스팅은 저번 포스팅에 이은 반응형 CSS Flex박스 2 포스팅입니다. CSS에 여러가지 속성이 있으니 이렇게 정리를 해놓고 필요할 때마다 볼려고 정리 해둡니다. Align-items 교차축에 따라 아이템을 배열한다. ⇒ justify-content는 주축을 따르고 Align-items는 교차축을 따른다. 단순히 아이템을 수직으로 배열하는 게 아님 왜냐 교차축이 수평일수도 있고 주축이 다르게 되어있을 수도 있음 속성값 default 는 flex-start flex-end : 교차축에 끝에서 시작점으로 배치된다. center : 수직과 수평 방향을 한번에 중앙 정렬하고 싶을 때 사용 baseline : 텍스트 기준선에 맞춰서 정렬된다. ⇒ 요소안에 텍스트를 넣어야한다. 각 글자를 잇는 줄.. 반응형 CSS Flex 박스1 - (flex, justify-content ,Flex-Wrap) 안녕하세요 이번 포스팅은 반응형 CSS flex 박스 에 대해 알아보겠습니다. 저도 공부한 내용을 정리하는 포스팅이다 보니 틀린 점도 있고 설명이 부족한 점도 있을 거에요 참고해서 봐주세요 시작합니다.~ 반응형 CSS flex박스는 원리와 개념을 이해할려고 하는 게 중요 ⇒ 어떤 식으로 돌아가는지라도 알아야 한다. FlexBox 페이지 콘텐츠 박스에 공간을 분배하는 것 px쓰면 하드코딩이 된다. 왜냐? 사용자마다 사용환경이 다른데 거기에 영향을 주기 때문에(크롬,익스플로러 등) 위에는 예시 FlexBox의 두개의 요소 본축과 교차축이 존재 EX) 가로가 본축 세로가 교차축 ⇒ flex-direction 속성을 통해서 축을 변경할 수 있다. 컨테이너 안에서 본축을 결정하는 요소 flex의 속성값.. 알면 유용한 CSS 속성2 - (hover,box-shadow) 안녕하세요 알면 유용한 CSS속성 2 포스팅입니다. 재밌진 않겠지만 재밌게 보세요 1. Hover 버튼이나 특정 영역에 마우스를 올리면 효과가 나타난다. 2. box-shadow X오프셋 Y오프셋 흐림 번짐 테두리색 ⇒ 그림자를 만드는 효과 3. cursor : pointer; ⇒ 지정된 범위안에 마우스를 올리면 마우스 모양이 포인터로 변경된다. 4. 배경특성 배경에서 바꿀 수 있는 다양한 특성 중 배경색상 ,이미지를 예시로 둘 수 있다.. 배경특성 예시 및 속기법 이미지의 기준점을 정하는 코드 첫번째 소스는 이미지 반복을 멈추는 소스 두번째는 설명과 같이 이미지 배경에 뒷배경 추가 이상으로 알면 유용한 CSS속성2 포스팅을 마치겠습니다. 알면 좋은 유용한 CSS속성들1 - (알파채널, Opacity(불투명도),transitions,Transform) 안녕하세요 이번 포스팅은 알면 좋은 유용한 CSS속성들에 대해 포스팅 해보겠습니다. 필수는 아니고 그냥 알아두면 좋을 정도라고 생각됩니다! 먼저 알파채널과 Opacity(불투명도)입니다. 2. position(위치특성) static 디폴트임 기본 위치 특성 relative 현 위치와 상대적 위치로 오프셋을 줄 수 있음 top , left등을 사용하면 오프셋임됨 ⇒ 위치가 변경이 된다. 문서에 원래 위치가 있지만 오프셋으로 위치가 설정이 가능함 absolute 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않음 최고 부모 루트에 상대적인 위치 ⇒ relative로 조상을 설정해줄 수 있음 fixed 일반 문서흐름에서 제거되고 제일 초기 조상 요소에 상대적인 위치이다. ⇒ 네비게이션 바를 만들 때.. CSS 단위 알아보기 안녕하세요 이번 포스팅에서는 CSS 단위에 대해 알아보겠습니다. Relative 유닛(상대적 단위) 1. 퍼센티지(%) 2. em em의 문제점 3.rem = root em 이상으로 포스팅 마치겠습니다. CSS 박스모델 Padding, Margin, display 속성 알아보기 안녕하세요 이번 포스팅에서는 CSS 박스모델 Padding, Margin, display 속성 알아보도록 하겠습니다. 1. Padding (패딩) 직관적으로 안에 있는 여백 크기라고 생각하시면 좋을 거 같아요 2. Padding 속기법 3. Margin(여백) 4. Display 속성 인라인요소와 블록요소는 생각보다 코딩하면서 중요하더라구요 알아두시면 좋을 거 같아요 (어떤 태그가 어떤 요소인지) 이상으로 포스팅 마치겠습니다! CSS 박스모델 가로세로 길이 조절, 테두리 모깍기 속성,속기법 알아보기 안녕하세요 이번 포스팅에는 CSS 박스모델 중 가로,세로 길이 조절, 테두리,모깍기 속성에 대해 알아보겠습니다. 테두리와 모깍기 속성들 잘린 주석문은 좌우 테두리 기준으로 요소의 크기 결정 예시) 속기법 한번에 빠르게 속성을 작성하는 방법 이상으로 포스팅 마치겠습니다. CSS !important , 인라인 스타일과 중요도 , CSS 상속 알아보기 안녕하세요 이번 포스팅에서는 CSS !important , 인라인 스타일과 중요도 , CSS 상속에 대해 알아보겠습니다. 1. !important 이 CSS는 특이도와 상관없이 예외적인 것으로 보면 된다. 2. 인라인스타일과 중요도 => 위에서 나온 1,2번은 우선도를 무시하기 때문에 알아두어야 한다. 하지만 최대한 사용을 자제하는 것이 좋다. 3. CSS 상속 구체적인 특성을 지정하지 않은 하위요소에 상위 항목 특성이 적용되는 것 CSS 우선순위, 계단식 CSS 알아보기 안녕하세요 CSS 우선순위, 계단식 CSS, CSS상속 알아보겠습니다. 1. CSS우선순위 ID > CLASS > ELEMENT 순서이다. CSS에는 특이도가 있는데 충돌이 생길 때 우선순위를 두는 것이다. 2. 계단식 CSS 적용된 스타일의 순서가 중요하다. 2개의 상반되는 h1의 스타일이 있는 경우 캐스케이드 때문에 밑에 있는 스타일이 적용된다. 이전 1 2 다음
