CSS
2023. 11. 28. 23:45ㆍDaily Codig Reminder
HTML 마무리
-file entype
<form name="myForm" action="target.html" method="post"
enctype="multipart/form-data">
파일선택:<input type="file" name="theFile"><br>
<input type="submit" value="전송">
<input type="reset" value="취소">
-fieldset/legend
<fieldset > <legend>로그인</legend>
아이디: <input type="text" name="userid" value="inky4832"><br>
비밀번호: <input type="text" name="passwd" ><br> </fieldset>
12. img 태그
그밖에
-pre
<pre> HTML5 HTML5
HTML5 HTML5 HTML5
HTML5 HTML5 HTML5
</pre>
→ 그대로 나옴
CSS
css 적용방식 세가지
inline 방식
: 적용하려는 태그내에서 style=“CSS” 형식 사용
<p>hello </p> <p style="color: blue;"> incline Style </p>
internal 방식
: 적용하려는 태그가 포함된 HTML파일에서 사용
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
.internal{ color: red; } </style>
</head>
<body>
<p>hello </p> <p style="color: blue;"> incline Style </p>
<p class= "internal">internal Style </p>
<p id="external">external style</p>
external방식
: HTMl 파일과 다른 파일에서 사용, *.css 파일형식
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css"> .internal{ color: red; } </style> </head>
<body> <p>hello </p> <p style="color: blue;"> incline Style </p>
<p class= "internal">internal Style </p> <p id="external">external style</p>
#external{ color: green; }
→ css 파일
- 전체 선택자
{ color: red; } - 태그 선택자
<style type="text/css"> h1,p{ color: red; } </style>
</head> <body>
<h1>태그 선택자 실습</h1>
<h2>태그 선택자 실습2</h2>
<h3>태그 선택자 실습3</h3>
<p>특정 태그의 color 속성에 CSS를 적용한다.</p> - 아이디 선택자★ ★★★★
<style type="text/css">
#one{ color: red; }
#two{ color: blue; } </style>
</head> <body>
<div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<h2>Hello3</h2> </div>
<div id="two">
<h1>world</h1>
<p>world2</p>
<h2>world3</h2> </div> - 클래스
<style type="text/css">
.select{ color: red; } </style>
</head>
<body> <ul> <li class ="select">홍길돌</li>
<li>이순신</li>
<li class ="select">유관순</li>
<li>강감찬</li> - 자식 선택자
-부모> 자식
특정자식선택
#one >h1{
color: red; } </style> </head>
<body> <div id="one">
<h1>Hello</h1>
<p>Hello2</p>
<div> <h1>world</h1> </div> </div> - -부모 자식 (후손선택)
모든 자손중 에h1해당하는것만 red
#one h1{
color: red; } </style> </head>
<body> <div id="one"> <h1>Hello</h1>
<p>Hello2</p>
<div> <h1>world</h1>
</div> </div> - 인접한 특정 형제 선택자( 선택자 + 형제선택자 )
:인접한 바로 뒤의 형제 요소를 선택할 때 사용한다.
h1+ h2{ color: red; } - 인접한 모든 형제 선택자( 선택자 ~ 형제선택자 )
인접한 뒤의 모든 형제 요소를 선택할 때 사용한다.
h1~h2{ color: red; } - 속성 선택자1- 기본 속성 선택자
- 특정한 속성을 가진 요소를 선택할 때 사용한다.
- 기본 속성 선택자는 특정한 속성의 존재 유무와 속성값을 이용하여 선택 할 때 사용한다.
[id]
[id="two"]
속성 선택자2- 문자열 속성 선택자
- 속성이 가지는 특정한 문자열을 가진 요소를 선택할 때 사용
a [href='https']{ color: red; }
a [href$='net']{ color: red; }
div[class*='man']{ color: red;
} </style> </head> <body>
<div class="man-news">man-news</div>
<div class="milk man">milk man</div>
<div class="letterman2">letterman2</div>
<div class="newmilk">newmilk</div>
<div class="superman">superman</div> </body> - 의사코드 클래스
checked !!!!!! 중요
disabled
abled
<style type="text/css">
a:link {color: #FF0000;}
a:visited{color: #00FF00;}
a:hover{color: #FF00FF;} -> 마우스대면색변화
a:active{color: #0000FF;} -> 작동?
input:focus { background-color: #FF0000;}
</style> </head> <body>
<a href="#" target="_blank" >This is a link</a><br>
이름 <input type="text" name="username" ><br>
나이 <input type="text" name="userage" ><br>
주소 <input type="text" name="useraddress" ><br>
주소2 <input type="text" name="useraddress2" disabled><br>
</body>
p:first-child{ -> 첫번째 자식으로된 모든 p태그 선택
color: red;
} </style> </head> <body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
<div> <p>div의 첫자식</p> </div>
모든 p태그 중에서 마지막 i태그를 지정 즉p태그가 부모인 모든 마지막 i태그를 선택
p> i:last-child{
color: red;
} </style> </head> <body>
<p>I am a <i>strong</i>man. I am a <i>strong</i>man.</p>
<p>I am a <i>strong</i>man. I am a <i>strong</i>man.</p>
유일한 자식으로 된 모든 p 태그 선택
p:only-child{
color: red;
} </style> </head> <body> <div>
<p>1</p> </div>
<div> <p>2</p>
<p>3</p>
</div> </body>
n번째 자식으로 된 모든 p 태그 선택 → 2배수 선택 2468
p:nth-child(2n){
color: red;
} </style> </head> <body>
<div> <p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div> </body> - 크기 단위
브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100%
본문 12pt, 테이블 내 9pt인 경우
본문 1em, 테이블 내 0.75em와 동일함.
px = pt / 0.75
pt = px * 0.75
em = pt / 12
% = pt * 100 / 1
#one{ font-size: 100%; }
#two{font-size: 200%; }
#three{ font-size: 1em; }
#four{ font-size: 2em; }
#five { font-size: 32px; }
#six { font-size: 12pt; } - 색상단위
/* 투명도 0~1*/
#four{ color: rgba(0,0,225,0.3); - display 속성 ★ ★ ★ ★ ★
p{ display :inside; }
div.two{
display :none; → hello2 world 안보임 }
→ 걍 사라짐 ㅅㄱ
span{ display: block; } </style>
</head> <body> <div>
<p>Hello<span>world</span></p>
-> 블록방식저장
Inline는 width와 height 속성이 적용이 안됨. margin는 좌우만 적용됨.
Inline-block는 width와 height 속성이 적용이 됨. margin는 상하좌우 모두적용됨 - visibility 속성
#box{ visibility: hidden; }
->자리는 차지하는 데 안보임 - opacity
요소 투명도
#box{ opacity: 0.2; /* 투명도 설정 : 0.2 - box
display: inline;
background-color: red; width: 300px; height: 50px; margin: 10px;
} </style> </head> <body> <div>
<span>Dummy</span>
<div id="box">
<span>죽는날 까지 하늘을 우러러 한점 부끄럼이 없기를,
잎새에 이는 바람에도 나는 괴로워했다.</span>
</div> <span>Dummy</span> </div> </body>
width 속성과 height 속성
#box{ opacity: 0.2; }
style type="text/css"> div{ width: 100px; height: 100px; background-color: red;
} </style> </head> <body> <div></div>
max-width 속성
max-width는 브라우저가 작아지면 알아서 width도 자동으로 조절된다.
}
#one{
width:500px;
height: 100px;
background-color: red;
}
#two{
height: 100px;
background-color: red;
}
#three{
max-width:500px;
height: 100px;
background-color: red;
}
margin 속성과 padding 속성- margin 속성은 마진의 너비를 지정하는 속성이고 padding 속성은 패딩의 너비를 지정하는 속성이다.
- margin 속성과 padding 속성은 width 속성과 height 속성과 별 도로 적용된다
- #one{ width:100px; height: 100px; background-color: red; }
#two{
width:100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 30px;
}
width: 300px; margin: auto; border: 1px solid red;
} </style> </head> <body> <h2>Use of the auto Value</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>
<div> This div will be centered because it has margin: auto; </div>
padding 속성- Content와 border 사이의 여백(안쪽 여백)을 의미한다
- width와 height 속성은 내용을 감싸는 영역의 크기를 지정하는 속성이다. box-sizing 속성은 이러한 기본 Box 모델을 변경할 수 있는 속성이다. ( width와 height 값을 고정시키는 효과
- background 관련 속성
다음은 배경(background)과 관련된 속성들이다.
background-color
background-image
background-repeat
background-attachment
background-position
<style type="text/css">
h1{ background-color: green; }
div{ background-color: #00FFFF; }
p{ background-color: rgb(0,200,255); } </style>- background-image 속성
- background-repeat 속성
- background-attachment 속성
background-image: url('../images/BackgroundFront.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom; → 그림위치 바뀜 - 폰트 속성
- 다음은 글꼴(font)과 관련된 속성들이다.
'Daily Codig Reminder' 카테고리의 다른 글
| 식별자와 데이터형, 연산자 (0) | 2023.11.29 |
|---|---|
| CSS+ JAVA (1) | 2023.11.29 |
| html 마무리 (1) | 2023.11.27 |
| html - head (0) | 2023.11.24 |
| 뷰, 시퀀스, 시노님 (1) | 2023.11.23 |