728x90 프론트엔드/CSS24 [CSS] 짝수/홀수 번째 태그에만 style 효과 주기 CSS 짝수 홀수 번째 엘리먼트 Select 하기 CSS를 작성하다 보면 여러 태그에 같은 style을 설정할 일이 많은데 Class를 통해 따로 지정하여 style 효과를 설정해도 되지만 홀수번째, 짝수 번째와 같이 교차 효과를 설정할 필요가 있을때는 Selector를 통하여 간단한 코드를 통해 설정이 가능하다. 엘리먼트명:nth-child(even) 짝수번째 엘리먼트 Select 엘리먼트명:nth-child(odd) 홀수번째 엘리먼트 Select 샘플 예제 body { margin : 25px; } .container { display : flex; flex-direction : column; } .item { width: 50px; height: 50px; margin-bottom : 5px; } .. 2021. 3. 20. [CSS] 변수 Variable 사용하기! CSS 변수(variable) 사용 CSS 코드의 가독성과 유지보수를 위해서는 변수의 사용을 권장한다. 변수의 선언은 어디서나 가능한데 변수의 선언은 원하는 변수 이름 앞에 -- 를 붙여주면 된다. 변수의 사용은 var 함수를 통해 가능하다. 변수의 선언과 사용 //변수 선언 예 --background-color : blue; //변수의 사용 예 background : var(--background-color); 하지만 하단의 예시와 같이 변수의 선언을 셀렉터 스코프 안에서 선언한다면, 다른 언어의 지역변수의 기능과 비슷하게 해당 엘리먼트에서 밖에 변수를 사용할수 없다. 셀렉터 내 변수의 선언과 사용 .selector { //변수의 선언 --background-color : orange; //변수의 사용.. 2021. 3. 12. [CSS] Transition 애니메니션 효과 property duration timing-function CSS 애니메이션 효과 주기 Transition property duration timing-function Transition-property : 이벤트시 변경 원하는 Property Transition-duration : 변경 시간 Transition-timing-function : 변경 속도 샘플 예제 .box { background-color : royalblue; width : 100px; height : 100px; } .box:hover { background-color : tomato; transition-property : background-color; transition-duration : 500ms; transition-timing-function : ease; } 출력 결과 2021. 3. 5. [CSS] Background 속성 CSS background-image background-repeat background-size background-position background 관련 속성 background-image : 이미지 주소, 경로 background-repeat : 이미지 반복 여부 background-size : 이미지 사이즈 자동 축소 확대 background-position : 이미지 중앙부 포커스 출력 CSS Selector { background-image : url('이미지주소'); /*이미지 반복 여부*/ background-repeat : no-repeat; /*이미지 중앙부 포커스 출력*/ background-position : center; /*커버에 맞춰 이미지 사이즈 자동 축소 확대*/ back.. 2021. 3. 4. [CSS] transform - Translate 수평, 수직 정렬 CSS 수평 수직 정렬 Transform - translate CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다. 가운데 정렬할수 있는 방법에는 다양한 방법이 있지만, transform 속성 또한 상당히 많이 사용이 되고 있다. CSS Selector { transform : translate(좌우, 상하); } 샘플예제 출력 결과 코드 수정 .container > .box { width : 200px; height: 200px; background : royalblue; /*하단의 코드 추가*/ transform : translate(100%,100%); } 출력 결과 2021. 3. 4. [CSS] box-sizing border-box content-box CSS 박스 사이즈 관련 속성 box-sizing CSS에서 박스의 크기를 지정하였는데도 원하는 크기로 안바뀌는 경우에는 css의 box-sizing 속성을 확인해볼 필요가 있다. CSS Selector { box-sizing : content-box; (기본값) box-sizing : border-box; } box-sizing 속성을 content-box로 하면, 설정해놓은 사이즈는 padding, border 속성의 사이즈를 제외한 박스 자체의 사이즈로 설정이 된다. 즉, width 와 height 를 100px로 설정해 놓아도, border : 5px; padding : 5px 으로 설정하게 되면, width 는 120px이 되는 것이다. padding, border 의 설정 사이즈를 포함하여 원.. 2021. 3. 4. [CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4. [CSS] Transform 속성 span 태그에 적용하기 CSS Transform 속성을 Span 태그 등 inline태그에 적용시 반응이 없을때가 있다. css transform 속성은 display : inline 속성을 가진 태그에는 적용이 되지 않는다. 만약 원하는 태그가 transform 속성이 적용되지 않는다면, inline 태그가 아닌지 확인하고, 해당 속성을 inline -> inline-block 으로 변경해보자 [SPAN 태그 display : inline] [SPAN 태그 display : inline-block] 2021. 2. 22. [프론트엔드 CSS] 엘리먼트 내 스크롤바 생성 overflow-y CSS Element Scroll bar overflow-x, overflow-y 브라우저 자체가 아닌, 엘리먼트 내 스크롤바 생성을 해야 할 때가 있다. CSS Selector { overflow-x : scroll;//가로 스크롤바 생성 overflow-y : scroll;//세로 스크롤바 생성 } overflow-x 는 선택된 엘리먼트의 가로 스크롤바 생성 overflow-y 는 선택된 엘리먼트의 세로 스크롤바 생성 [결과 출력] 2021. 2. 20. [CSS] user-select 텍스트 선택 효과 없애기 웹 개발을 하다보면 간혹 버튼 등에서 텍스트 선택 효과가 나오는 경우가 있다. [CSS] span { cursor :pointer; border : 1px solid tomato; padding : 9px; background-color: transparent; color : tomato; /* 추가하여 텍스트 선택효과 방지 */ user-select: none; } 위와같이 css를 작성하게되면, 원치않는 텍스트 선택 효과를 막을수 있다. 2021. 2. 17. 이전 1 2 3 다음 728x90
