이레

퍼블 작업을 하다 보면 화살표 아이콘을 자주 사용하게 되는데, 이미지를 사용할때도 있지만 태그를 사용해 만들기도 합니다. border 위와 옆면만 있는 박스를 만든 후 rotate를 시키면 됩니다. * codepen 참조 See the Pen after로 화살표 만들기 by jh-baek-95 (@jh-baek-95) on CodePen.

오늘은 css를 작성했을 때, 스타일이 적용되는 우선순위에 대해 정리해볼게요. 작업할 때 이런 규칙에 대해 알고 있어야 css내에서 충돌이 나지않습니다. 작업을 하다 보면 하나의 태그에 여러 가지 스타일을 주는 경우가 있는데, 이때 특정한 규칙에 따라 우선순위가 부여되는 것입니다. 순서 대로 나열해 보자면, ⭐️우선순위⭐️ 속성 값 뒤에! important를 붙인 속성 html 내에 style을 직접 지정한 속성 #id로 지정한 속성 .클래스, :추상클래스로 지정한 속성 (추상 클래스> 클래스) 태그 이름으로 지정한 속성 상위 객체에 의해 상속된 속성 이 순서입니다. 만약 모든 순서가 다 같다면 제일 나중에 선언된 스타일이 적용됩니다.

css로 정렬시키는 방법이 여러 가지 있는데, 오늘은 float에 대해서 정리해볼게요. float만의 특징이 있기 때문에, 조심해서 사용해야 합니다. 단어의 뜻 그대로 '뜨다'라는 성질이 있기 때문에 태그들이 나란히 있다가 그중 하나가 float 속성이 들어가면, 그 사이에서 붕 뜨게 됩니다. display:block 속성을 무시하는 거죠 float는 left 정렬과 right 정렬이 있는데 (inherit, none 제외) float이 설정된 요소는 브라우저가 높이를 인지를 못하는 큰 문제점이 있습니다. 이때 float 끊기라는 것을 해주면 되는데, 여러 가지 방법이 있습니다. float의 부모에게 강제적으로 높잇값 주기 -> 반응형일때 자동 높이값 설정 불가능 float의 부모에게 overflow:h..

오늘은 일하면서 자주 썼던 input type 에 대해서 정리해볼게요. 인풋태그의 타입은 굉장히 다양하지만, 저는 아직 몇가지 타입밖에 써보질 못했어요. 제일 많이 사용하는 타입 순서대로 나열해보자면, 이렇게 5가지 정도 됩니다. 1, input type="text" 말 그대로 text 타입이다. 한줄의 입력필드가 생성된다. 2, input type="checkbox" 클릭하면 체크되고, 다시 클릭하면 체크가 풀리는 체크박스 name = 전달할 값의 이름 value = 전달한 값 checked = 선택된 상태로 표현된다. * 체크박스는 여러개 선택 가능 * label태그와 같이 쓸 경우엔 input 의 id 와 label 의 for를 동일하게 줘야한다. 그래야 라벨태그 클릭했을때 체크박스에 체크가 들어간..

css를 구성하면서 자주쓰게 됐던 인접선택자와 일반선택자에 대해 정리해볼께요. 형제 선택자에는 두가지 종류가 있습니다. 첫번쨰, 인접 형제 선택자 (adjacent sibling selector) 두번쨰, 일반 형제 선택자 (general sibling selector) 두 선택자의 공통점은 '같은 부모를 가진다'입니다. 차이점을 정리해볼께요. ⭐️ 인접 형제 선택자 작성법 ( '.class'는 임의입니다. ) .class1 + .class2 {속성: 속성값;} 같은 부모를 가진 .class1 바로뒤에 오는 2에게 스타일을 적용한다. ex) p1 + p2 {color:red;} 이 경우에 p1바로 뒤에있는 p2의 color가 red 로 나옵니다. ⭐️ 일반 형제 선택자 작성법 ( '.class'는 임의입..