★ CSS 선택자(가상 클래스) 1. :first-child 가상 클래스 검색된 태그 자체를 조작 2. ::before 가상 요소(Element) 검색된 태그 주변을 조작 ★ 전후 선택자 1. ::before = :before 2. ::after = :after ■ HTML 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero laudantium cum deleniti nostrum similique inventore, quam placeat cupiditate porro aliquid ipsam hic molestiae incidunt voluptate laboriosam accusamus! Ad, atque. 빨강 노랑..
★ Form 컨트롤러 Selector with CSS ■ HTML 코드 Html Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio quos mollitia provident quae nihil quam ex, consequatur voluptas molestiae vero illum? Nulla ratione, nam sequi voluptates praesentium consectetur possimus rerum. 제목 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti id laudantium, quo vero praesentium reiciendis! Dolore, p..
★ 속성 선택자 1. 선택자[속성명] : 해당 속성을 명시했는지? .list a[target] { background-color: gold;} 2. 선택자[속성명=값] : 해당 속성과 값을 명시했는지? .list a[target=_blank] { background-color: gold;} 3. 선택자[속성명^=값] : 속성값이 값으로 시작하는지? java -> startsWith() .list a[href^=https] { background-color: gold;} 4. 선택자[속성명$=값] : 속성값이 값으로 끝나는지? java -> endsWith() .list a[href$='com'] { background-color: gold;} 5. 선택자[속성명*=값] : 속성값이 포함되는지? java ..
★ 가상 클래스 1. :first-child : 자신이 자신의 그룹에서 첫번째 자식인지? li:first-child { color : orange; } 2. :last-child : 자신이 자신의 그룹에서 마지막 자식인지? li:last-child { color : red; } 3. :nth-child(n) : 자신이 자신의 그룹에서 n번째 자식인지? li:nth-child(2) { color : blue; } 4. :nth-last-child(n) : 자신이 자신의 그룹에서 마지막에서 n번째 자식인지? li:nth-last-child(3) { color:blueviolet } ■ 실행 결과 ■ n 1. 숫자 : index(위치) > 1부터 시작 2. 수열 :2n, 2n+1, 5n+2 etc.. 3. 수..
★ BOX 사이즈 측정 1. content-box : 상자의 실제 크기 = 너비(높이) + 패딩 + 테두리 2. border-box : 상자의 실제 크기 = 너비(높이) ■ HTML 코드 상자1 상자2 상자3 ■ CSS 코드 ■ 실행 결과
★ 문제 4 × 3 = 12이다. 이 식을 통해 다음과 같은 사실을 알 수 있다. 3은 12의 약수이고, 12는 3의 배수이다. 4도 12의 약수이고, 12는 4의 배수이다. 두 수가 주어졌을 때, 다음 3가지 중 어떤 관계인지 구하는 프로그램을 작성하시오. 첫 번째 숫자가 두 번째 숫자의 약수이다. 첫 번째 숫자가 두 번째 숫자의 배수이다. 첫 번째 숫자가 두 번째 숫자의 약수와 배수 모두 아니다. 입력 입력은 여러 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 10,000이 넘지않는 두 자연수로 이루어져 있다. 마지막 줄에는 0이 2개 주어진다. 두 수가 같은 경우는 없다 ★ 소스코드 import java.util.Scanner; public class Main { public static vo..
★1. 네이버 IT기사 리스트 만들기 https://news.naver.com/main/clusterArticles.naver?id=c_202304152240_00000090&mode=LSD&mid=shm&sid1=105&oid=001&aid=0013884570 ■ HTML 작업 스페이스X 스타십 발사 승인 "17일 비행 목표" 스페이스X 달·화성 탐사우주선 '스타십' 오늘 첫 시험발사 예정 일론 머스크가 이끄는 우주기업 스페이스X의 화성 탐사용 대형 우주선 '스타십(Starship)'이 17일(현지시간) 첫 지구궤도 시험 비행에 나선다. 달 … 뉴스1 머스크 화성 개척 꿈 첫 단추…스타십 이르면 오늘 밤 발사 일런 머스크의 화성 이주 꿈을 담은 우주선 '스타십'이 이르면 오늘 밤 첫 지구궤도 비행에 나..
★ 태그의 수평 정렬 인라인 태그와 블럭 태그의 수평 정렬 수평 정렬(내용물의 정렬) text-align 1. 인라인 태그 불가능 > 여백(공간)이 없어서 불가능.. 2. 블럭 태그 가능 > 여백(공간)이 있어서.. > text-align 속성은 블럭 태그에서만 적용이 가능하다. 수평 정렬(태그 스스로 정렬) > 불가능(지원하는 속성 없음) 1. 인라인 태그 가능 > 부모(블럭) 태그의 text-align을 사용해서 정렬 2. 블럭 태그 불가능 > 부모영역과 자식 영역이 일치하기 때문에 > 좌우에 공간이 없음. 가능 > margin을 이용 > 좌우 margin을 동일하게 지정(auto) 인라인 태그 #div1 { width:200px; margin-left : auto; margin-right : aut..
