본문 바로가기
728x90

css28

[CSS] 배경 고정한 채로 스크롤 움직이기 background-attachment ? - background-attachment 가 배경 이미지 스크롤 시에도 고정시키는 효과 - scroll(기본값) : 배경이미지가 스크롤 시 페이지와 함께 스크롤 처리 - fixed : 배경이미지가 스크롤 시 페이지와는 다르게 고정처리 background-attachment: fixed; HTML fixed01,fixed02 div태그에 배경이미지 고정하기 ! CSS *{ padding: 0; margin: 0; } header{ width: 100%; height: 100px; background-color: pink; } footer{ width: 100%; height: 100px; background-color: #333; } main{ width: 10.. 2023. 12. 5.
[CSS] 반응형 디바이스 크기별로 width 설정 디바이스별로 화면 크기가 달라 px 단위로 된 것을 % 로 설정해야 디바이스 크기에 따라 줄어들고 늘어날 수 있다. % 기준점은 %를 설정하려는 선택자의 상위 부모 선택자를 px 값으로 고정값 주고 그것을 기준으로 %로 변경하는 것이다. html 디바이스별 크기 setting 또리 봄이 주인 강아지 화면1 화면2 화면3 화면4 CSS body{ width: 412px; background-color: tomato; margin: 0; padding: 0; border: 0; } header{ width: 100%; background-color: skyblue; } .top>h3{ display: inline-block; } .top>button{ display: inline-block; } .nav>d.. 2023. 9. 25.
[HTML] input 태그의 disabled 속성 활용하기 태그의 disabled 속성은 해당 요소가 비활성화됨을 명시한다. disabled 속성이 명시된 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없다. 또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 요소의 데이터는 제출되지 않는다. 따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있다. disabled 속성은 불리언(boolean) 속성이다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다. 이름 : 학번 : 학과 : .. 2023. 8. 22.
[CSS] 마우스 hover시 이미지 확대하기 (크기 고정) 마우스를 이미지에 갖다 대었을 때 이미지가 확대되어 보이게 하는 법 (이미지를 확대하지만 전체 크기는 고정시킴) 이미지 확대하기 (크기 고정) overflow:hidden 옵션을 .fix 스타일에 추가한다. html Hover 이미지 확대하기 css h1 { color: yellow; background-color: lightgray; font-size: 18px; text-align: center; font-family: Arial, Helvetica, sans-serif; } img { max-width: 100%; transition: all 0.3s linear; } .fix { width: 200px; margin: 0px auto; overflow: hidden; } .fix:hover img.. 2023. 7. 27.
[CSS] text에 outline 테두리 넣기 -webkit-text-stroke 텍스트에 외곽선(border) 스타일 추가하기 (텍스트를 강조하기 위해 사용) 방법 1. 그림자 효과 부여하기 text-shadow 2. 외곽선 효과 부여하기, -webkit-text-stroke 3. 그림자 효과를 사용하여 외곽선 구현하기(브라우저 호환성 목적) 1. text-shadow : 그림자 효과 부여하기 text-shadow: 3px 2px 4px red; 2. -webkit-text-stroke : 외곽선 추가 -webkit-text-stroke: 2px red; 2023. 7. 22.
[CSS] gradient() 그라데이션 선형, 방사형, 원추형 중 선택 가능 강경한 선 만들기 .striped { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } 누적 그래디언트 다른 그라디언트와 함께 그라디언트를 쌓을 수도 있다. 상단 그라디언트가 완전히 불투명하지 않은 한 아래 그라디언트는 계속 표시된다. .stacked-linear { background: linear-gradient( 217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71% ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(3.. 2023. 7. 19.
[CSS] flex 속성 flexbox css에서의 flexbox는 보다 쉽게 레이아웃 구조를 잡을 수 있는 css 속성이다. flex 박스는 요소의 크기가 정확하지 않거나, 반응형일 때 유용하게 사용할 수 있다. 정렬, 방향, 크기, 순서 모두 css만으로 유연하게 조절할 수 있기때문에 다양한 레이아웃을 보다 쉽게 구현할 수 있다. flexbox는 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성되어 있다. flexbox는 부모요소인 flex container와 자식 요소인 flex item에 정의하는 속성이 다르다. 전체적인 정렬에 관련된 속성은 부모요소인 flex container에 정의하고, 자식 요소의 크기나 순서는 flex item에 정의한다. 속성의 구분 flex container.. 2023. 7. 16.
[HTML] strong, em 차이점 strong 태그는 콘텐츠가 중요한 의미를 갖거나 단어를 강하게 강조하고 싶을 때 사용한다. 기본 모양은 굵은 글자이다. (b 태그는 글자를 굵게 만든다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점이다.) em 태그는 글씨를 강조하고 싶을 때 사용한다. 기본 모양은 기울임꼴이다. 2023. 7. 15.
[CSS] overflow 속성 사용하기 overflow : 내용이 요소의 크기를 벗어 났을때 visible : 박스를 넘어가도 보여준다. hidden : 박스를 넘어간 부분은 보이지 않는다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나온다. auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나온다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 2023. 7. 14.
[CSS] text-overflow란? clip,ellipsis,fade text-overflow ? text-overflow는 CSS 속성 중 하나로, 요소 내의 텍스트가 요소의 크기를 초과하는 경우에 어떻게 처리할지를 지정하는 속성이다. 주로 긴 텍스트를 가진 요소를 다룰 때 사용되며, 해당 요소의 텍스트가 너무 길어서 요소의 경계를 벗어나는 경우에 적용된다. 일반적으로, 요소의 가로 너비에 따라 텍스트가 줄 바꿈되거나 생략되어 표시된다. 그러나 text-overflow 속성을 사용하면 이러한 동작을 세부적으로 제어할 수 있다. text-overflow 속성 1. clip : 텍스트를 요소의 경계에서 잘라내고, 잘린 텍스트를 표시하지 않습니다. 잘린 텍스트는 숨겨진다. 2. ellipsis : 텍스트를 요소의 경계에서 잘라내고, 잘린 텍스트의 끝에 "..." (말줄임표)를.. 2023. 7. 6.
728x90

티스토리툴바