LEVEL UP

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

[CSS] 상속 inherit, initial

Date.

inherit

https://developer.mozilla.org/ko/docs/Web/CSS/inherit

부모 요소로부터 해당 속성의 값을 받아서 사용합니다.

예제1

span{color:#fff; background:#000;}

<p>Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:blue">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:green">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>

결과

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

예제2

.t1 span{color: inherit;}
span{color:#fff; background:#000;}

<p class="t1">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:blue">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:green">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>

결과

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

initial

https://developer.mozilla.org/ko/docs/Web/CSS/initial

속성의 기본값(초깃값)을 요소에 적용합니다.

기본값은 브라우저가 지정합니다.

예제

p{color:tomato}
em, i{color: initial;}

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  <em>Nesciunt accusantium, </em>
  minus delectus laudantium architecto 
  <i>autem molestias labore ut placeat </i>
  distinctio assumenda eius explicabo possimus, 
  deserunt veritatis iste eaque ipsam beatae?
</p>

결과

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt accusantium, minus delectus laudantium architecto autem molestias labore ut placeat distinctio assumenda eius explicabo possimus, dieserunt veritatis iste eaque ipsam beatae?

상속 되는 속성

z-index	X
position	X
top/right/bottom/left	X
overflow	X
float	X
opacity	⭕
display	X
width/height	X
margin	X
padding	X
border	X
box-sizing	X
font	⭕
color	⭕
line-height	⭕
text-align	⭕
text-decoration	X
white-space	⭕
background	X
vertical-align	X
visibility	⭕

참고 : https://poiemaweb.com/css3-inheritance-cascading

[CSS] container/inner 너비 만큼 % 구해야할때1

Date.

git : https://github.com/ksoyy/LEVEL-UP/tree/main/css/container%2Cinner%20너비%20만큼%20%25%20구해야할때1

codepen : https://codepen.io/ksoyy/pen/abYqrdy

- 반응형사이트

- 고정값이 아닌 유동적으로 움직일때

웹사이트 돌아다니다가 혹은 일하실때 자주 봤을법한 레이아웃입니다~!

빨간색 부분 (삼각형, 빨간색 배경)을 구하는 방법입니다

See the Pen container/inner 너비 만큼 % 구해야할때1 by kim so yeon (@ksoyy) on CodePen.

예시로 첨부한 codepen은 반응형 코드로 제작되어 있기때문에 1200px 이상해상도에서 확인해주세요!

css calc 함수 (바로가기)를 활용해서 구하는 방법입니다!

container,inner 너비 ÷ 2 해서 계산하시면됩니다!

[HTML] input, select 태그의 required 속성

Date.

required 속성은 폼이 제출되기전 필수로 입력되어야하는 input, select를 선택해달라고 안내문구가 뜨는 속성이다!

<input type="text" required>

<select required="required">
  <option value="">=선택=</option>
  <option value="1">옵션1</option>
  <option value="2">옵션2</option>
  <option value="3">옵션3</option>
</select>

사용법은 매우 간단하당..

테스트 : https://codepen.io/ksoyy/pen/YzZQzLB

input, select 태그의 required 속성

...

codepen.io

[HTML] from, input 자동완성 해제하기

Date.

autocomplete="off"

form이나 input 에서 자동완성 해제하는 옵션을 찾았당!

autocomplete="on" 으로 작업하면 자동완성기능이 켜져있는 상태이며,

autocomplete="off" 로 작업하면 자동완성 기능이 꺼져있는 상태이다.

<form action="" autocomplete="on">
  <input type="text" placeholder="입력1" />
  <input type="text" autocomplete="off" placeholder="입력2" />
</form>

<input type="text" autocomplete="off" placeholder="입력3" />

폼전체에 적용할때는 폼에 속성을 써주면 된다.

폼속성부분보면 입력1은 자동완성이 켜져있는 상태,

입력2는 자동완성이 꺼져있는 상태이다.

폼전체가 아니라 input에 따로 쓸때는 마지막 입력3처럼 쓰면 된당!!

테스트 : https://www.w3schools.com/Tags/att_input_autocomplete.asp

HTML input autocomplete Attribute

HTML autocomplete Attribute ❮ HTML tag Example An HTML form with autocomplete on (and off for one input field):

참고 : https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

How to turn off form autocompletion - Web security | MDN

This article explains how a website can disable autocomplete for form fields.

developer.mozilla.org

inherit

initial

상속 되는 속성

티스토리툴바