메모장

CSS 본문

HTML,CSS/개념정리

CSS

Itchild 2024. 4. 14. 16:08
728x90
반응형

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 스타일 적용하기</title>
<style type="text/css">
/*외부 -> 내부 -> 인라인(내부로 들어갈 수록) 뒤로갈수록 우선순위는 높아짐, 
나중에 적용되기 때문에 덮어쓰기 방식이 되기 때문에 */
/*내부 스타일 시트 */

p{
color: red; // 여기서 P에 red라고 설정해도 
}
</style>
</head>
<body>

<!-- 로렘입숨  --> // 예시 보여줄때 쓰는 의미 없는 글 

<!-- 글자에 직접 적용하는것을 인라인 방식으로 스타일 적용  
위에서 아래로 내려오기 때문에 마지막에 적용 되었기 때문에 -->
<p style="color: blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
// p 에 인라인 방식으로 직접 blue라고 적용 하였다.
</body>
</html>
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 선택자id,class</title>
<!--유일하게 요소에게 붙이는 속성이 id이면 그 아이디를 선택 하는것이 샵 이다. 
class 는 . 이다. -->
<style type="text/css">
	#title{ // 유일한 id 에 적용하려면 #을 붙인다.
	color: red;
	}
	.txt{ // 2개이상의 class 에는 . 을 붙인다.
		color: blue;
	}
</style>
</head>
<body>

<!-- 웹크롤링 할때 내가 원하는 요소를 잘 가져오려면 다양한 선택자의 활용을 익혀 두어야 하기 때문에 
모르는 선택자 위주로 알려주심 ! -->

<!-- p 태그가 요소라고 하는데 요소선택자를 활용했다. 나 얘 할래 라고 찍는것. 기초 바디 안에 있는 모든 p에게 적용이 된다. 하나만 선택할 때에는 선택자가 필요하다. -->

<p id="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</body>
</html>
 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 선택자_하위,자식 선택자</title>

<!--  띄어쓰기 하위선택자는 요소 안에 있는 모든 리스트한테 접근이 가능하다.  -->
<style type="text/css">
		.box p {
		
		color: red;
		}

</style>
<!-- .box >p 자식 선택자 > 내 안에있는 하나만 선택을 할 수가 있다. 
보통 크롤링 할때 자식 선택자를 많이 활용함  -->

</head>
<body>


<div class="box">
<p>Lorem ipsum dolor sit amet,</p> // 본문
<p>Lorem ipsum dolor sit amet,</p>
<ul>
	<li><p>Lorem ipsum dolor sit amet,</p></li> // 리스트 형식의 본문
	<li><p>Lorem ipsum dolor sit amet,</p></li>
	<li><p>Lorem ipsum dolor sit amet,</p></li>

</ul>
</div>

<p>Lorem ipsum dolor sit amet,</p> // 위에서 .box p 가 

</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 선택자_그룹 선택자</title>
<!-- * 와일드 카드 성능이 엄청 떨어짐 이 페이지에 있는 모든 요소를 *이 다 본다. 
, 콤마를 이용해서 정확히 표현 해준다.  -->
<style type="text/css">

	h1, p{ // h1 과 p 는 blue 색으로 바꿔줘 
		color: blue;
	}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet</p>


</body>
</html>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상클래스</title>
<style type="text/css">
	a{
		color: lightblue;
	}
	a:hover{ // 마우스를 갖다 댔을 때 바뀌는 색깔 
             //링크에 마우스를 올렸을 때 텍스트 색이 변하는 효과는 :hover를 사용한 것
		color: red;
	}
	a:before{ // a 시작전에 앞에 "▶"를 붙여준다.
		content: "▶"
	}
	ul:after{ // ul후 올 단어 
		content: "이용해주셔서 감사합니다! ";
	}
</style>
<!-- ul과 우선순위가 겹치는 것이 없기 때문에 a 다 쓰고 밑에다가 ul:before 이라고 써줘도 됨  -->
<!-- 앞뒤로 멘트를 활용할 수도 있다.  -->
<!--  뭔가 공통적으로 앞에 붙는 단어의 경우 css나 외부에서 스타일을 주기 때문에 크롤링이 안될수 있다 "▶" -->
<!-- 마우스를 올리게 되면 빨간색으로 바꿔줄래 ? : 으로 붙는것을 가상 클래스 라고 한다. 임의로 뭔가를 지정해준다. -->
</head>
<body>

<!--  쇼핑몰 네비게이션 바 등에서 활용되는거 -->
<ul>
	<li><a href="https://www.naver.com">전체 상품 목록보기</a></li>
	<li><a href="https://www.naver.com">신상품 목록보기</a></li>
	<li><a href="https://www.naver.com">BEST 목록보기</a></li>
	<li><a href="https://www.naver.com">고객센터 문의하기</a></li>
</ul>

</body>
</html>
 
 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블록 요소를 인라인 요소로 변경하기</title>
<style type="text/css">
	li{
		list-style-type: none;
	}
	.gnb li{
		display: inline; //inline : 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
	}
	.gnb li a{
		display: inline-block;
		background: white;
		color: black;
		width: 150px;
		text-align: center; // 가운데 정렬
		text-decoration: none; // 밑줄 만들기 none
		height: 40px; // 간격
		line-height: 40px; // 줄에 대한 간격
	} // 이게 세개가 거의 한 세트 처럼 붙어다님 
	.gnb li a:hover{ // 마우스를 올렸을때 배경은 하늘색, 밑줄이 쳐진다.
	background: lightblue;
	text-decoration: underline;
	}
</style>
</head>
<body>

<!-- 쇼핑몰 내용 스킬적인 것들 배우기 -->
<!-- 띄어쓰기를 안해도 한줄이 다 블록으로 차지하고 있어서 인라인 요소로 바꿔야 한다.  -->
<!-- 글로벌 네비게이션 바 gnb  -->
<ul class="gnb">
	<li><a href="https://www.naver.com">전체 상품 목록보기</a></li>
	<li><a href="https://www.naver.com">신상품 목록보기</a></li>
	<li><a href="https://www.naver.com">BEST 목록보기</a></li>
	<li><a href="https://www.naver.com">고객센터 문의하기</a></li>
</ul>

</body>
</html>
 

1. inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.

대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있다.

예를 들어, 여러 개의 inline 엘리먼트 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 된다.

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

 

2. block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 된다.

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 된다.

 

3. inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작한다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이다.

대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있다.inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 한다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이용약관</title>
<style type="text/css">
	.agree{ // agree라는 클래스 안에 이렇게 적용해줘 
		width: 500px; // 가로 길이,넓이 500px
		height: 100px; // 세로길이,높이 100px
		border: 1px solid black; // 테두리 블랙으로 얇게
		overflow-y: scroll; // 스크롤 형식으로 // y축. 즉, 위에서 아래로 내용이 넘칠때 어떻게 보여줄것 인지
	}                      //overflow-x // x축. 즉, 왼쪽에서 오른쪽으로 내용이 넘칠때 어떻게 보여줄것 인지 
	</style>
</head>
<body>

<h1>이용약관</h1> // 네이버 회원가입 서비스 이용약관을 복사해왔다.
<p class="agree">
여러분을 환영합니다.
네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다.

네이버 서비스를 이용하시거나 네이버 서비스 회원으로 가입하실 경우 여러분은 본 약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기 바랍니다.

다양한 네이버 서비스를 즐겨보세요.
네이버는 www.naver.com을 비롯한 네이버 도메인의 웹사이트 및 응용프로그램(어플리케이션, 앱)을 통해 정보 검색, 다른 이용자와의 커뮤니케이션, 콘텐츠 제공, 상품 쇼핑 등 여러분의 생활에 편리함을 더할 수 있는 다양한 서비스를 제공하고 있습니다.
여러분은 PC, 휴대폰 등 인터넷 이용이 가능한 각종 단말기를 통해 각양각색의 네이버 서비스를 자유롭게 이용하실 수 있으며, 개별 서비스들의 구체적인 내용은 각 서비스 상의 안내, 공지사항, 네이버 웹고객센터(이하 ‘고객센터’) 도움말 등에서 쉽게 확인하실 수 있습니다.

네이버는 기본적으로 여러분 모두에게 동일한 내용의 서비스를 제공합니다. 다만, '청소년보호법' 등 관련 법령이나 기타 개별 서비스 제공에서의 특별한 필요에 의해서 연령 또는 일정한 등급을 기준으로 이용자를 구분하여 제공하는 서비스의 내용, 이용 시간, 이용 횟수 등을 다르게 하는 등 일부 이용을 제한하는 경우가 있습니다. 자세한 내용은 역시 각 서비스 상의 안내, 공지사항, 고객센터 도움말 등에서 확인하실 수 있습니다.



</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 01</title>
<style type="text/css">
	li {
		list-style-type: none;
	}
	li a {
		margin: 10px;
		padding: 5px;
		display: block;
		width: 150px;
		height: 40px;
		text-decoration: none;
		line-height: 40px;
		background: lightblue;
		transition: width 2s, background 1s; // 가로로 2초 배경은 1초에 바뀐다
	}
	li a:hover {
		background: red;
		color: white;
		width: 300px;
	}
</style>
</head>
<body>

<h3>로 고</h3>
<hr>
<ul>
	<li><a href="#">메 일</a></li>
	<li><a href="#">카 페</a></li>
	<li><a href="#">블 로 그</a></li>
	<li><a href="#">쇼 핑</a></li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 2</title>
<style type="text/css">

	@keyframes test{ // 애니메이션을 동작 시킬때 @keyframes (이름) // 중괄호안에 상태를 기입
	0% { background: lightgray; transform: translate(0,0);} // 시작
	50% { background: lightgreen; transform: translate(100px,200px);} // 이만큼 이동했다가
	100% { background: lightblue; transform: translate(0,0);} // 끝 다시 제자리로 
	}
	p{
		padding: 5px;
		width: 100px;
		height: 100px;
		background: lightgray;
		animation-name: test;
		animation-duration: 5s; // 몇초에 걸려서 움직일지
		animation-fill-mode: forwards; //다하고 나서 어떤 상태로 유지할까 ? 
		animation-iteration-count: infinite; // 몇번할까 ? 무한대로
	}


</style>
</head>
<body>

<p>1:1 <br> 
&nbsp;24시간 <br> 
상담</p>

</body>
</html>
 

margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다다.

width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적는다.

margin과 padding는 border 을 경계로 나뉜다.

 

 

margin 과 padding의 차이를 설명하는 사진

반응형 미디어 쿼리

<!DOCTYPE html>
<html> 
<head>
<meta charset="UTF-8">
<title>반응형 미디어쿼리</title> 
<style type="text/css">
    h1, h2, ul, li, p, div {margin:0; padding:0; box-sizing:border-box;}
    li {list-style-type:none;}
    .clear:after {content:""; display:block; clear:both;}
    a {line-height:1.5; color:black;}
    header {background:RoyalBlue;}
    h1 {color:white; padding:10px;}
    .gnb li {margin:10px; padding:10px; background:Salmon;}
    .content {padding:20px;}
    .ad {margin:10px; padding:20px; background:Chocolate;}
    footer {padding:10px; background:SkyBlue;}
    
    @media all and (min-width:768px) and (max-width:1024px) { // 이정도 사이즈가 되면
        .gnb {float:left; width:25%;}
        .content {float:left; width:75%;}
        .aside {clear:both;}
    }
    @media all and (min-width:1025px) { // 커졌을때
        .wrap {max-width:1280px; margin:0 auto;}
        .gnb {float:left; width:20%;}
        .content {float:left; width:50%;}
        .aside {float:right; width:30%;}
    } // 다양한 기기에서도 화면이 뒤틀리거나 깨짐없이 이용가능해야한다! < 반응형 >
</style>
</head>
<body>
    <div class="wrap">
       <header>
          <h1>L O G O</h1>
       </header>
       <div id="container" class="clear">
            <div class="gnb"> // 왼쪽에 배치된 링크
                <ul>
                    <li><a href="#">메일</a></li>
                    <li><a href="#">카페</a></li>
                    <li><a href="#">블로그</a></li>
                </ul>
            </div>            
            <div class="content">
                <h2>==페이지목록==</h2> // 안쪽 가운데에 있는 본문 
                <p>
                   <a href="#">상세페이지로 이동</a><br>
                   <a href="#">상세페이지로 이동</a><br>
                   <a href="#">상세페이지로 이동</a><br>
                   <a href="#">상세페이지로 이동</a><br>
                   <a href="#">상세페이지로 이동</a><br>
                </p>                
          </div>
          <div class="aside">
              <ul class="ad"> // 오른쪽에 있는 광고
                  <li><h2>네이버</h2><a href="#">https://www.naver.com/</a></li>
                  <li><h2>카카오</h2><a href="#">https://www.kakaocorp.com/page/</a></li>
              </ul>
          </div>
       </div>
        <footer> 
            <p>ⓒcopyright | All rights reserved.</p>
        </footer>
    </div>
</body>
 

푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함한다.

- 저자(author) 정보

- 저작권 정보

- 연락처

- 사이트맵(sitemap)

- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼

- 연관 페이지 등

 

 

728x90
반응형

'HTML,CSS > 개념정리' 카테고리의 다른 글

HTML : id 와 class 실수  (0) 2024.04.14
[ VisualStudioCode ] css 편하게 작업하기  (0) 2024.04.14
CSS 속성 선택자  (0) 2024.04.14
HTML  (0) 2024.04.14
'HTML,CSS/개념정리' Related Articles more