본문 바로가기

전체 글

(10)
css 선택자를 알아봅시다 기본 선택자** { }모든 요소태그명p {}모든 태그.클래스.title {}class="title"인 요소#아이디#main {}id="main"인 요소 계층 선택자A BA 안에 있는 모든 Bdiv p {}A > BA의 직계 자식 Bul > li {}A + BA 바로 다음 형제 Bh1 + p {}A ~ BA 이후의 모든 형제 Bh1 ~ p {} :nth-of-type() 선택자선택자 설명:first-child부모의 첫 번째 자식 ul li:nth-child(n) 같이 내부 요소에 직접 조건을 주는 형태:last-child부모의 마지막 자식 ul li:nth-child(n) 같이 내부 요소에 직접 조건을 주는 형태:nth-child(n)부모의 n번째 자식 (태그 종류 상관 없음) ul li:nth-chi..
시맨틱 태그와 기초 레이아웃을 알아봅시다 안녕하세요 :)어쩌다보니 css를 제일 싫어했고 싫어하는 신입개발자는 하늘의 뜻으로(?) 퍼블리싱을 하게됐습니다.이제 친해져봐야죠..ㅎㅎㅎㅎㅎ 시맨틱 태그란?의미 있는 구조로 웹페이지를 만들 수 있게 도와줘서 접근성, SEO(검색 최적화), 유지보수에 강점. 시맨틱 태그 의미 특징 / 실무 팁사이트나 섹션의 머리말로고, 메뉴, 로그인 버튼 등 포함주요 내비게이션 영역로 메뉴 리스트 작성페이지의 핵심 콘텐츠한 문서에 한 번만 사용!주제별 구역제목(h2~h6)을 동반하는 콘텐츠 묶음, article여러개를 묶음독립적 콘텐츠블로그 글, 뉴스 기사, 카드 등부가 정보광고, 인기글, 관련글, 태그 등페이지의 바닥글저작권, SNS 링크, 사이트 정보 등 강조표시형광펜처럼 강조할 부분 시맨틱 태그를 이용한 웹 레이아..
css - 자동으로 수평 수직 위치 시키기 안녕하세요~ 오브젝트를 화면 가운데 정확히 위치시키는 방법을 기록하려고 합니다.프로젝트를 할때 비즈니스 로직 구현도 어렵긴 했지만 항상 css가 발목을 붙잡고는 했었는데요(화면이 다 흩어져버리고 마는..ㅋㅋㅋㅋ) 저처럼 어려움이 있는 분들을 위해 자동으로 수평 수직 중앙에 위치시키는 방법을 정리했습니다.자식요소를 감싸는 부모요소가 있어야 합니다아래와 같은 구조인경우로 설명드리겠습니다. html 코드  css 코드.parent{ position : relative; width: 1000px; height: 1000px; background-color: blue; border: 1px solid 000000;}.child{ position : absolute; width: 200px; hei..