본문 바로가기

CSS독학하기10

CSS display 속성 display:none과 visibility:hidden의 차이display:block과 display:inline-block의 차이display:none 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않는다. (특정 요소를 hover상태에서 노출되도록 할때 사용할 수 있다. )visibility:hidden는 어디에 사용하는가?display 속성화면 보여주는 방식display:none; 화면에서 숨김. 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않음 (삭제의 개념)display:block; 블록레벨요소로 만듬.display:inline; 인라인 레벨로 만듬 / 주로 목록에서 사용 /박스 모델 값이 적용 안됨.display:inline-block; 인라인 레벨로 배치 + 블록 레벨 속성 지정.[화면에.. 2022. 5. 8.
CSS속성 transition 시간에 따른 속성 적용 transition-delaytransition-durationtransition-propertytransition-timing-function transition-timing-function 을 이용해서 자연스럽게 효과를 줄 수 있다. ease-in-out transition이란? 시간에 따라 웹 요소의 스타일 속성이 변함transition : transition 속성을 한번에 설정transition-delay: 트랜지션 지연 시간 설정transition-duration : 트랜지션 진행 시간 설정 / [시간]transition-property : 트랜지션 대상을 설정 / [all], [none], [속성 이름] transition-timing-function : 트랜지션 속도 곡선을 설정속도 곡선 종.. 2022. 5. 6.
CSS 애니메이션 애니메이션 속성을 이해한다.애니메이션을 이용해 요소를 이동시킨다.애니메이션을 이용해 시간차 효과를 줄 수 있다.애니메이션을 이용해 움직임의 속도를 조절할 수 있다.%단위로 키프레임을 지정할 수 있다. 이를 이용해 더 동적인 무빙을 만들어낼 수 있다.애니메이션을 반복할 경우, animation-delay 가 처음에만 적용되는데, 반복 될 때마다 지연되도록하는 방법은?애니메이션이란?CSS3의 animation 속성을 사용하여 자바스트립트나 플래시 없이 웹요소에 애니메이션을 추가할 수 있다. Keyframes : 애니메이션이 바뀌는 지점을 @keyframes 속성을 이용해 정의. from : 애니메이션의 시작 프레임를 설정함to : 애니메이션의 끝 프레임를 설정. @keyframes keyframesName .. 2022. 5. 5.
CSS 인라인 요소 , 블록레벨 요소 인라인요소 , , , , , , , , , , , 주로 내용부분 즉 화면에 표시한 콘텐츠. 한줄에 여러개가 정렬. 가로로 배열. 자신만 크기를 인식하여 표시. width, height를 적용하여 사용할 수 없음. 블록레벨요소 , , , , , ~, , , , , , 기본적으로 세로정렬. 한줄에는 하나씩, 즉 가로폭을 자신이 100% 인식. width, height를 적용하여 사용 > background-clip 적용할 때 width랑 padding값이 없어서 제대로 적용이 안됨. 2022. 4. 22.
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.

티스토리툴바