인프런 HTML CSS 문자 선택자 first-letter, first-line
인프런 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 관련 참고 링크