-
인프런 HTML CSS 문자 선택자 first-letter, first-line프로그래밍 연습 2020. 11. 2. 17:01
인프런 HTML CSS
문자 선택자 first-letter, first-line
01
정리하기에 앞서 중요한 부분 체크하고 넘어가기
margin : 0 auto;
위쪽을 제외한 나머지는 균등하게 공백
브라우저 중앙에 가운데 정렬
margin : 0 0 0 0 ;
top right bottom left
위 오른쪽 아래 왼쪽 공백
생략해서 두 개의 값만 쓸 수도 있음
02
주석에 관련된 문제 해결
브라켓 편집기를 이용할 때
주석이 적용되지 않는 경우가 있었다.
그럴 때 brackets 주석 단축키를 사용하면
쉽게 해결할 수 있다.
단축키 : ctrl+/
선택하고자 하는 영역을 주석처리 혹은 해제 가능
문자 선택자 first-letter와 first-line의 속성
<style> #history2:first-letter,#history1:first-letter{ font-size: 2em; } #history2:first-line,#history1:first-line{ color:#2160d1;font-weight: bold; } </style>first-letter 처음에 나온 문자를 선택한다.
2014년 04월 09일, 2013년 01월 12일의 처음에 나온 문자는 2이므로
폰트 사이즈를 2em으로 설정한다.
first-line 문장의 첫 줄을 선택한다.
first-line에 font-weight:bold; color:#2160d1을 주었기 때문에
2014년 04월 09일, 2013년 01월 12일이 파란색 계열로 굵게 적용되었음을 알 수 있다.
<body> <div id="wrap"> <div id="header"> <h1>설립개요</h1> </div> <div id="content"> <p>중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의 종합지원체계를 구축함으로써 중소기업의 경쟁력 제고를 위해 설립된 서울산업진흥원은 중소기업의자생력을 키우고 안정적인 경영여건을 조성하기 위하여 끊임없이 노력하고 있습니다.</p> <p id="history2">2014 04월 09일<br/>서울산업진흥원 사명변경06월 30일 서울산업진흥원 상암DMC 이전</p> <p id="history1">2013 01월 12일<br/> 다누리 시민청 개관05월 09일 꿈꾸는청년가게 명동점 개관05월 10일 큐비드 광화문 개관06월 21일 다누리 강남점 개관07월 20일 서울크리에티브랩 개관08월 27일 다누리 성북점 개관 </p> </div> </div> </body>스타일 적용 후 출력된 결과 화면이다.
직접 코드를 짜며 복습하기
overflow:hidden
일정 영역을 벗어나는 부분을 보이지 않게 하는 스타일 속성이다.
레이아웃을 구성할 때 float 속성과 자주 함께 사용한다.
자식 요소에 float 속성이 있으면 부모 요소가 높이 값을 잃는다.
그래서 부모 요소의 높이값을 찾아주는 것이 overflow:hidden이다.
하위요소에 float 속성을 적용하면 상위요소에는 overflow:hidden을 적용한다.
overflow hidden과 flow를 같이 사용하여 레이아웃을 구성하는 방법을
One Ture Layout 방식이라고 표현한다.
padding
요소의 안쪽 여백을 지정하는 태그이다.
속성 값 순서는 시계방향으로 위, 오른쪽, 아래, 왼쪽이다.
(이해하기 쉬운 예: 패딩 옷을 입으면 몸집이 커진다)
속성 값 순서와 적용 방법은 margin과 동일하다.
margin
요소의 외부에 여백을 지정하는 태그이다.
(내부는 그대로이고 주변 공간의 여백만 늘리는 것)
<style> /* 이미지를 감싸고 있는 것이 <li>인데 <li>은 <ul>이 감싸고 있고, <ul>은 footer가 감싸고 있다. 그러므로 이미지에 테두리 적용을 하려면 footer ul이어야 한다. overflow에 대해 정리를 할 것 */ #footer ul{ overflow: hidden; border:2px solid #cccccc; } #footer ul li{ list-style: none; float:left; padding:20px; } </style><body> <!-- 이미지를 감싸야 하기 때문에 테두리를 주어야 함 그러면 어디에다 스타일 적용을 해야 할까?--> <!-- 두 이미지를 균일하게 간격을 맞춰야 한다. 어떻게 스타일 적용을 해야 할까?--> <div id="footer"> <ul> <li><img src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></li> <li><img src="http://www.sba.seoul.kr/kr/images/footer/copyright.png"></li> </ul> </div> </body>
HTML CSS 반응 선택자(:hover & :active) 상태 선택자 구조 선택자
https://keunsoop.tistory.com/36
후손 선택자, 자손 선택자 관련 링크
https://keunsoop.tistory.com/34
margin 0 auto 관련된 링크
https://keunsoop.tistory.com/33
overflow:hidden 참고링크
blog.naver.com/weekamp/222047417147
blog.naver.com/95oooooo/221985177058
padding margin 관련 참고 링크
'프로그래밍 연습' 카테고리의 다른 글
인프런 HTML CSS 문자 선택자 링크 선택자 부정 선택자 (0) 2020.11.04 생활코딩 WEB JavaScript 배열과 반복문 (0) 2020.11.04 생활코딩 JavaScript 비교연산자 데이터타입 조건문 if else (0) 2020.11.02 JavaScript 데이터 타입과 변수와 대입 연산자 (0) 2020.11.02 인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2 (0) 2020.10.19