본문 바로가기

CSS21

사이트 따라 만들기 part.3 이미지를 정렬하는 방법 1. 단순히 가로로 정렬하는 경우 (좌우 여백 맞춰서 꽉채우기) 핵심 속성 : {display: flex} {justify-content: space-between} 위의 경우는 이미지 3개를 가로로 단순 정렬하면 된다. 여기서 포인트는 이미지들의 여백과 우측 이미지가 영역에 꽉차도록 우측 정렬되도록 하는 것이다. 1. html코드 로 3개의 img를 하나로 묶고, 를태그로 감싸서 세부적인 스타일을 적용할 수 있도록한다. 2. style 지정하기 banner 영역 전체의 여백과 크기를 지정한다. {margin-top;} 위의 컨텐츠 요소와의 간격을 지정한다. 를 선택해서 지정하기 a{float: left;} 가로로 일렬로 정렬한다. a{margin-right;} 요소간의 간격을 지.. 2022. 4. 26.
사이트 따라 만들기 part.2 사이트의 컨텐츠 영역 만들기 1. 컨텐츠 그룹핑 POPULAR ITEM 구성 : 좌측의 menu와 우측의 제품 정보 영역 menu는 POPULAR ITEM이라는 타이틀과 EXPEDITION와 2개의 카테고리로 이루어짐 > 전부 텍스트 제품 정보 영역은 제품 이미지와 제품명, 제품 가격이 하나의 그룹으로 4개가 정렬됨. > 이미지와 텍스트 2. 선택자를 사용하여 그룹을 지정. /*전체 컨텐츠 영역*/ /*popular item 전체*/ /*popular item 안에서 menu 부분*/ /*popular item 안에서 제품 정보 영역*/ 3. 하위의 요소들을 나눈다. title부분은 태그를 사용한다. menu의 경우 함께 정렬되기 때문에 태그를 사용한다. 1. 태그를 이용한 방법 제품 정보 영역 전체를 .. 2022. 4. 25.
CSS border 여러 속성 border-styleborder-radius간단하게 버튼을 만들거나 할 때 border-radius로 모서리에 라운드를 주면 자연스럽다.Q : border-style 중에서 outset이나 ridge랑 함께 border-radius를 쓸 수 있나?  A : 쓸 수 있지만 자연스럽진 않다.border 속성이란?border-style : 테두리 스타일 지정border-style은 기본값이 none이기 때문에 테두리 스타일을 지정하지 않으면 다른 속성들을 지정해도 표시되지않는다.주로 사용되는 속성 값은 solid 실선 none테두리 없음. 기본 값. (존재하지않는다는 표현이 더 정확함)hiddennone과 마찬가지로 테두리가 없다. 다만 보이지 않는 상태. none의 경우 테이블끼리 경계가 충돌하면 보이지만.. 2022. 4. 24.
사이트 따라 만들기 Part.1 사이트보고 분석해서 그대로 따라 만들어보기 1. 기본셋팅 보통 사이트를 제작할 때 필수적으로 생성하는 폴더 3가지 css css폴더 안에 꼭 들어가는 2가지 css파일 reset.css - 필수 style.css - 외부스타일시트(일반적으로 다들 사용함) 사이에 링크를 걸어서 연결 js images 2. 사이트 구조 분석 큰 분류부터 먼저 html문서에서 작성하고 세부적인 요소들을 만든다. 크게 나누면 상단부분 메인이미지 컨텐츠 하단부분 은 큰 영역을 지정한 것이다. 크게 4파트로 나눈 후 그 안에서 또 세분화와 조직화를 한다. 이때는 요소별로 같이 정렬해야하는 것들끼리 묶어서 그룹핑한다. 예를 들어, 상단 부분은 상단의 top과 navigation부분으로 나눌 수 있다. 그리고 top부분은 또 다시 l.. 2022. 4. 23.
CSS 인라인 요소 , 블록레벨 요소 인라인요소 , , , , , , , , , , , 주로 내용부분 즉 화면에 표시한 콘텐츠. 한줄에 여러개가 정렬. 가로로 배열. 자신만 크기를 인식하여 표시. width, height를 적용하여 사용할 수 없음. 블록레벨요소 , , , , , ~, , , , , , 기본적으로 세로정렬. 한줄에는 하나씩, 즉 가로폭을 자신이 100% 인식. width, height를 적용하여 사용 > background-clip 적용할 때 width랑 padding값이 없어서 제대로 적용이 안됨. 2022. 4. 22.
CSS gradient 속성 그러데이션 효과 적용선형 그러데이션 원형 그러데이션그러데이션 반복그러데이션 효과는 브라우저와 버전별로 사용법이 다르다.한번에 여러개의 그러데이션을 적용할 수 있나?각기 다른 방향으로 생성이 가능한가?그러데이션 효과로 배경 꾸미기그러데이션과 브라우저 접두사그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image속성 값이나 background속성값으로 지정한다.선형 그러데이션linear-gradient( to , color-stop, [color-stop,..]);방향'to' 키워드를 함께 사용to top : 아래에서 위로to bottom : 위에서 아래로to right : 왼쪽에서 오른쪽으로to left : 오른쪽에서 왼쪽으로각도각도이고 그 값은 .. 2022. 4. 19.
CSS background 속성 background-color 속성 - 배경 색 지정하기 16진수( 세밀히 색상 조절) rgb값(필요하면 투명도도 함께 조절할 수 있음) 색상 이름(원색 사용) 배경 색 스타일은 하위 요소에 상속 되지 않는다. 따라서 각각의 요소에 배경을 따로 지정할 수 있다. 별도로 지정을 안할 경우 전체 배경 색이 보이게 된다. background-clip 속성 - 배경 적용 범위 조절하기 각각의 요소마다 배경을 지정하는 방법 말고 박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. div 선택자의 경우 width랑 padding값 꼭 지정해야한다. border-box : 박스 모델의 가장 외곽인 테두리까지 적용 padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box : 박스.. 2022. 4. 16.
CSS list-style 속성 목록 스타일list-style-type  속성 list-style-image 속성list-style-position 속성list-style 속성텍스트 관련 스타일 속성 복습하기font 속성이랑 text 속성을 아직 헷갈린다. 자꾸 반대로 적어서 스타일이 적용이 안된다. 몇번 더 복습이 필요할 것 같다. 불릿 대신 이미지 넣을 때 제한이 있나? (사이즈나 용량에 대한)list-style-type  속성 - 목록의 불릿과 번호 스타일 지정하기 순서 없는 목록에 불릿 모양 바꾸기disc : ● circle : ○square : ■none : 불릿 없애기순서없는 목록에서 불릿 없애기ul { list-style-type: none; }순서 목록에서 숫자 바꾸기decimal : 1로 시작하는 십진수decimal-l.. 2022. 4. 15.
CSS text style 속성 2 문단 스타일direction 속성text-align 속성text-justify 속성text -indent 속성line-height 속성text-overflow 속성text-shadow 쉼표로 값을 구분해서 여러개의 그림자를 만들 수 있다. 잘 이용하면 그라데이션 가능.문단 스타일로 텍스트 정렬하는 것 말고 white-space를 이용해 공백이랑 문장 줄 넘김 한번에 조절 할 수 있다니 특히 텍스트가 많은 article 등에 사용하면 유용할 것 같다.Q : 그림자말고 글자 자체에도 그라데이션도 넣을 수 있을까?A : https://reveur1996.tistory.com/11 CSS text style 속성텍스트 스타일 color 속성 text-decoration 속성 text-transform 속성 te.. 2022. 4. 14.

티스토리툴바