본문 바로가기

Language/CSS18

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.
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.
CSS text style 속성 1 텍스트 스타일color 속성text-decoration 속성text-transform 속성text -shadow 속성white-space 속성letter-spacing / word-spacing 속성text-shadow 쉼표로 값을 구분해서 여러개의 그림자를 만들 수 있다. 잘 이용하면 그라데이션 가능.문단 스타일로 텍스트 정렬하는 것 말고 white-space를 이용해 공백이랑 문장 줄 넘김 한번에 조절 할 수 있다니 특히 텍스트가 많은 article 등에 사용하면 유용할 것 같다.그림자말고 글자 자체에도 그라데이션도 넣을 수 있을까?글자에만 배경을 따로 지정해서 색상을 넣는 방법은?텍스트 스타일 -문단에 사용되는 스타일 color  속성 - 글자 색 지정태그 {color:rgb(0,200,0);} /.. 2022. 4. 13.
CSS font 속성 글꼴 관련 스타일font-family  속성@font-face  속성 font-size 속성font-weight 속성font-style 속성font-variant 속성font  속성font-*속성은 사용하는 값들이 다르기 때문에 한번에 묶어서 사용할 수 있다. /슬래쉬로 연결하면 훨씬 간결하고 편하다.글꼴 파일을 먼저 선언하는 것으로 다른 결과를 낼 수 있다. 먼저 선언 한 woff 파일만 다운로드되고 그 후에 선언한 ttf는 다운로드 되지 않는 것. 효율적인 처리방식이라고 생각한다.Q : , 태그를 이용해 이탤릭체를 표현하는 것과 font-style 속성으로 이탤릭체를 표현하는 것에 차이점은?A :  웹 접근성과 연관되어있다. : 텍스트의 강세를 표현할 때 사용.(보다는 강하지 않다.)  스크린 리더기.. 2022. 4. 12.
CSS 스타일 기본기 스타일에 대한 기본적인 이해스타일 우선순위스타일 상속스타일을 사용하는 이유스타일 표기법스타일 시트태그(tag)와 요소(element)의 차이 : 태그는 태그 자체만을 지칭하며, 요소는 태그가 적용된 것을 가리킨다. 따라서 스타일을 적용하는 것은 태그가 아닌 요소이다. '요소에 적용되는 스타일'이 알맞은 표현이다.브라우저 접두사 : 브라우저별로 속성들이 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분한다. -webkit- 웹키트 방식 브라우저용 (사파리, 크롬)-moz- 게코 방식 브라우저용(모질라, 파이어폭스)-o- 오페라 브라우저-ms- 마이크로소프트 인터넷 익스플로러Q : 웹키트 방식과 게코 방식?A : 참고 사이트 바로가기CSS의 C. 캐스캐이딩(Casc.. 2022. 4. 12.

티스토리툴바