학습/CSS (8) 썸네일형 리스트형 [CSS]반응형 웹 만들기 미디어 쿼리를 사용한다. 예시) @media (min-width:1000px) { h1{ font-size:20px; } } @media의 옆에는 브라우저의 창크기를 입력하는데 min-width의 경우 해당 크기값 이상일 때 적용이 되며, max-width의 경우 해당 크기값 이하일 때 적용이 된다. min- width를 사용할 경우 가장 작은 크기를 시작으로 레이아웃을 작성하여 점점 커지는 방향으로 max-width를 사용할 경우 가장 큰 크기를 시작으로 레이아웃을 작성하여 점점 작아지는 방향으로 나아간다. [CSS]그리드(Grid) 1. grid 2차원으로 배치하는 방법 grid-template-rows(columns) gap grid-auto-rows(columns) grid-row(column), span grid-area, grid-template-areas 2. grid 나누기 grid-template-rows: 간격, 간격...(원하는 개수만큼) 로우 나누기 grid-template-columns : 간격, 간격, 간격 ...(원하는 개수만큼) 컬럼나누기 grid-template : row1 row2 ... / col1 col2 ... 한번에 작성하기 3. 유연한 크기와 유용한 함수들 grid-template : 1fr 1fr ... / 1fr 1fr... fr(fraction)을 사용하면 그리드 박스 크기 기준으로 비율을.. [CSS]FlexBox 1. FlexBox 1차원으로 요소를 배치하는 방식 가로나 세로로 배치가능 다양한 방식으로 정렬가능 flex-direction justify-conent, align-items flex-wrap gap flex-grow, flex-shrink, flex-basis 2. 배치방향 flex-direction : row; 기본값 왼쪽에서 오른쪽으로 배치됨 column 위에서 아래로 배치 됨 row-reverse 오른쪽에서 왼쪽으로 column-reverse 아래쪽에서 위쪽으로 배치됨 자주 쓰이지는 않음 3. 정렬 요소가 배치되는 방향을 기본 축(Main axis) 기본 축에 수직인 방향 교차 축(Cross axis) justify-content 기본 축 정렬 flex-end 기본축 맨 끝 flex-start .. [CSS]포지션(position) 1. 포지션 position 속성 static relative abosulte fixed sticky 2. static 포지션 position의 기본 값 원래 있어야 할 위치에 배치 일반적인 글의 흐름을 따른다 3. 기준 위치에서 자리 옮기기 static을 제외한 나머지 포지션은 top right bottom left를 기준으로 위치를 정할 수 있다. 4. relative 포지션 원래 있어야할 위치를 기준으로 자리를 정한다. margin이랑 다른점은 margin은 다른 요소의 위치에 영향을 주지만 포지션을 이용하면 영향을 주지 않는다. 자리를 움직여도 기존위치 영역에 다른 요소가 채워지지 않는다. 5. absolute 포지션 가장 가까이 포지셔닝(static을 제외한 나머지)이 된 조상요소를 기준으로 배.. [CSS]선택자, 가상클래스, cascade 1. 선택자 목록(selector list) 선택자1, 선택자2 ...{ 내용 } 2. 선택자 붙여 쓰기 태그선택자#id.클래스 .클래스.클래스 #id.클래스 등등 여러방법으로 쓸 수 있다. 붙어있는 선택자를 모두 가지고 있는 요소를 선택한다. 태그선택자가 포함되어있으면 태그선택자를 제일 앞에 둬야 한다. 아이디와 클래스는 순서가 상관없다. 3. 자식, 자손 선택하기 자식 결합자 부모 > 자식{ } 자손 결합자 조상 후손{ } 4. 가상 클래스 선택자::before 또는 선택자::after css 속성 content를 꼭 써줘야 함 content: ''; 선택자:hover 마우스를 올릴시의 스타일 선택자:active 클릭하고 있을 때의 스타일 선택자:focus 포커스가 적용될 때 스타일 선택자:visit.. [CSS]CSS 기본 정리 - 3 1. 배경 이미지 background-image: url('주소'); background-repeat : no-repeat; 이미지의 반복여부 background-position : center; 이미지의 위치 background-size: cover; cover 높이나 넓이기준으로 이미지를 가득채움 contain은 높이나 넓이기준으로 이미지가 잘리지않게 채움 한번에 작성하기 background : url('주소') no-repeat center / cover; 2. 그라디언트 background-image : linear-gradient( (각도), 시작색깔, 끝색깔); 만들기 복잡해서 인터넷에서 gradient generator 검색하면 쉽게 만들 수 있음 3. 배경 위에 그라디언트 겹쳐보기 back.. [CSS]CSS 기본 정리 - 2 1. css 규칙 선택자 { 속성 : 속성값; } 2. id 만들기 3. id 선택자 #아이디 { } 아이디는 중복해서 만들지 않는다. 4. class 만들기 5. class 선택자 .클래스{ } 6. css파일 링크하기 rel : relationship 관계 7. 개발자도구에서 확인하는 user agent stylesheet 웹브라우저에서 제공하는 기본 스타일 8. RGBA RGB에 불투명도 Alpha를 추가한 것 ex) rgba(255, 0, 0, 0.5) 9. 다양한 크기 단위 - 절대단위 픽셀 px - 상대단위 % em rem vh vw %는 부모 태그에 대해서 상대적인 크기 em은 부모 태그의 폰트 크기 기준 배율 rem은 html 태그의 폰트 크기 기준 배율 vh 브라우저 창의 높이 기준으로 .. [CSS]CSS 기본 정리 - 1 1. CSS란? Cascading style sheet 계단식 스타일 시트 마크업 언어를 실제 표기되는 방법으로 기술한 스타일 언어 2. css에서 색깔을 표현하는 방법 - red, yellow, blue 같은 색상 이름 - RGB에 16진수를 사용한 헥스(HEX) 코드 ex) #ffffff - RGB 색상코드 3. CSS 적용 방법 - 인라인 스타일 태그 안에 style 속성을 적용한다 ex) - 내부 스타일 html 문서 안에 style 태그를 사용하여 그 안에 스타일 작성한다. - 외부 스타일 외부 css 파일 작성하여 link 태그로 연결하여 사용 인라인 스타일과 내부 스타일은 중복되기 쉽고 코드가 복잡해져 유지보수가 어려울 수 있다. 실무에서는 외부 스타일을 사용한다.외부스타일은 로딩 속도가 살.. 이전 1 다음