🍁모서리 둥글기 모서리 둥글기는 border-radius 속성을 사용한다. px, %를 사용하여 구현하며, px와 %를 사용할 때 각각의 정책이 다르다. px 단위 사용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas ipsum impedit, quis nam repudiandae ea praesentium repellat architecto dolor soluta porro cupiditate quam! Sapiente commodi animi voluptas expedita! Laudantium. Facilis, sunt vel? Dolorem praesentium saepe atque neque at. Est, porro..
🍁배경 이미지 배경 이미지의 특징 네이버를 보면 마우스 오른쪽 클릭을 했을 때 어떤 건 '다른 이름으로 이미지 저장'이 아니라 '다른 이름으로 링크 저장'이 뜬다. 이는 배경 이미지로 넣은 것과 이미지로 넣은 것의 차이이다. 배경 이미지는 이미지가 아니기 때문에 마우스 오른쪽 클릭을 했을 때 '다른 이름으로 이미지 저장'이 뜨지 않는다. 왜 배경 이미지로 이미지를 넣은 걸까? 하나의 이미지에 장면별로 구성된 것을 sprite image라고 한다. 이 기법은 디자이너와 조직이 갖춰져 있을 때 좋은 방식이다. sprite image의 특징 업무 상 장점 디자이너가 이미지를 개발자에게 전달하는데, 파일을 개별적으로 관리하면 이미지 이름을 정하는 것부터 어렵다. 또한 일부 이미지가 바뀌면 전체 이미지를 바꿔야 ..
🍁shadow 그림자 효과는 텍스트와 상자에 줄 수 있다. 그림자 효과를 적당히 주게 되면 요소 간에 더욱 명확하게 구분 지어 보이게 할 수 있다. 1. text-shadow x y blur color 값을 부여한다. x, y는 그림자 방향, blue 효과는 뿌옇게 만드는 것을 의미하며, color는 그림자의 색깔이다. 숫자가 작을수록 광원이 작아진다고 생각하면 된다. 상자1 상자2 상자3 텍스트에 붙는 그림자이기 때문에 text-shadow라고 한다. 2. box-shadow x y blur color 값을 부여한다. #box2 { box-shadow: 2px 2px 3px #999; } box-shadow는 텍스트가 아닌 박스 자체에 그림자가 생긴다. 🍁shadow 활용 Box Shadow CSS G..
🍁전후 선택자 전후 선택자는 선택한 요소의 앞/뒤에 추가로 내용을 생성하는 역할을 한다. 지금까지 봐 온 first-child 같은 것들은 가상 클래스이다. 그리고 ::before는 가상 요소이다. 1. ::before = :before 2. ::after = :after 전후 선택자는 콜론이 하나가 아니라 2개를 쓴다. 콜론을 하나로 적어도 동작은 하지만 그럼에도 2개로 적는 이유는 성질을 확실하게 하기 위해서이다. 가상 요소 추가 Lorem ipsum dolor sit amet consectetur adipisicing elit. At laudantium vitae sit fugit aliquid recusandae rerum reiciendis unde nisi quisquam, ullam nequ..
🍁가상 클래스 가상 클래스의 특정 속성을 이용하여 컨트롤의 상황만을 콕 집어서 선택할 수 있다. 디자인을 재정의해서 required, readonly, disabled의 생김새에 차이가 나지 않게 했다. required, optional input[type=text]:required { background-color: gold } input[type=text]:optional { background-color: gray; } required와 optional은 짝꿍이다. 입력이 필수값(required)인 경우와 optional인 경우를 골라내어 서식을 적용할 수 있다. disabled, enabled input[type=text]:disabled { background-color: cornflowerbl..
🍁속성 선택자 속성 이름이나 속성 값으로 태그를 찾을 수 있다. [CSS] CSS Seletor (CSS 선택자) 2 🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 isaac-christian.tistory.com 의사 클래스 (Pseudo Class)에서 이어진다. 1. 선택자[속성명] 네이버 예스24 다음 11번가 아이작의 블로그 a[target]은 a를 사용한 모든 target을 찾아서 서식을 적용한다. target은 해당 속성을 보..
🍁가상 클래스 [CSS] CSS Seletor (CSS 선택자) 2 🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 isaac-christian.tistory.com 의사 클래스(Pseudo Class)에서 이어진다. 1. :first-child 목록 사과 귤 바나나 포도 복숭아 파인애플 참외 망고 수박 딸기 first-child는 앞의 대상이 자신의 그룹 내에서 첫 번째 자식인지를 묻는다. 목록 태그의 첫 번째 자식인 사과만을 선택한다. ..
🍁 태그의 수평 정렬 인라인 태그 vs 블럭 태그의 정렬을 비교해 보도록 하자. [HTML] 인라인 태그와 블럭 태그 📌인라인 태그와 블럭 태그 모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다! 예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다. isaac-christian.tistory.com 인라인 태그와 블럭 태그에 대해서는 위 글을 참고한다. 태그의 수평 정렬 인라인 태그 인라인 태그 블럭 태그 블럭 태그 위 코드를 이용하여 정렬을 구현해 보도록 하자. 1. 내용물의 정렬 내용물의 정렬은 text-align으로 구현한다. text-align은 블럭 태그에만 사용한다. 인라인 태그 #span1{ text-align: center; } 인라..
