학습 소감
선택자에 대하여 자세히 알 수 있는 시간이 되었다. id, class, 직접 선택자 등 html 작성시에 쓰여진다라는 것만 인지하고 있었는데, 이번 수업을 통하여 언제 사용하는건지, 선택자들 사이의 우선순위는 어떻게 되는지 알게되었다. 그리고 이미지를 적용할 때, html에서 img태그를 사용하여 이미지 삽입하는 것과 css에서 background로 설정할 때의 차이점 또한 명확하게 알게되었다. 홈페이지를 만들면서 무심코 사용한 태그들에 대하여 자세히 꼼꼼하게 알려주셔서 웹접근성에 한걸음 더 나아가는 시간이 되었던 것 같다!
6.30 웹프로그래밍 깃허브 링크 :)
CSS
CSS 속성, 속성값
속성값은 반드시 세미콜론(;)이 붙어야함
height: 300px;
min-width: 300px;
max-width: 1000px;
border: solid 10px red;
border-radius: 50px;
background-color: yellow;
opacity: 0.5;h1
h1태그 안에 css 문법 들어갈 수 있으나 코드 분량이 늘어나므로 추천하지않음. 가독성 떨어짐
<h1 style="background-color: pink;">Hello World</h1>CSS 적용하기
html
1.head 태그안에 style 값 입력
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
color: red;
}
</style>
</head> 2.태그 안에 직접 css 입력
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>Hello World
CSS
3.html-css 연결시키기
link태그로 연결
css(stylesheet): 디자인을 담당
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>tip)
1.css 주석처리 방법 /* */ (단축키 shift+/)
2.같은 속성값일 경우 태그를 쉼표로 같이 사용 가능:코드분량줄이면서 효율적으로 할 수 있다.
header h1,
footer h1 {
color: blue;
}
header p,
footer p {
color: green;
} 부모-자식 태그
ex) ul - li : 부모-자식 / 각각의 li들 : 형제관계
css: 직접 태그로 설정시 부모의 영향보다 더 세다
a 태그 : 태생적으로 글자가 파란색이기때문에 부모 속성의 영향을 받지 않는다.
부모 명시 후 자식 태그 : 더 명확하게 지정 가능
선택자 : type, id, class, 속성 선택자
id(이름) - #id명
class(별명) - .class명
id & class
여러개의 별명(class)을 가질 수 있으나 이름(id)은 한개만 사용가능
class 동일한 클래스명을 여러곳에 사용 가능
id id는 오로지 하나만 사용 가능
속성값지정 - 직접적인 태그 명시, id명 혹은 class명 사용 가능
동일한 선택자 지정 했을 경우 나중에 지정한 값 적용 됨(우선순위).
클래스명 지정했을 경우 순서와 상관없이 클래스가 우선.
클래스(class)와 아이디(id) : 아이디(id)가 우선
html에서 직접 스타일 지정 : 최우선
style 속성 > id > class > tag
*속성값 수정할 경우 우선순위를 활용하여 코드를 수정할 수 있다. (원본코드 유지)
id명, class명 직접 명시, 태그
위 코드에서는 color : pink 가 적용된다. #intro .container h1
공간의 크기 지정 : width(너비),height(높이)
width,height - px 대신 %입력하면 창의 크기에 따라 사이즈가 바뀐다 (반응형)
사이즈는 부모를 기준으로 변함
% : min-width & max-width (최소,최대값 설정가능)
div {
width: 100%;
height: 300px;
min-width: 300px;
max-width: 1000px;
border: solid 10px red;
border-radius: 50px;
background-color: yellow;
opacity: 0.5;
}border : solid px color : 선의종류 굵기 색상
border-radius : 50px; : 모서리
구글폰트 link - html에 적용
<head>
<meta charset="utf-8">
<title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>text-align 태그의 범위 안에서 글자의 위치 지정 (left, center, right)
list-style : none;
list의 태생적으로 가지고 있는 속성값을 제거함
background 속성
css에서 background를 설정하였을 때, 이미지의 크기보다 배경이 크면 반복하여 배경을 채운다.
이미지 반복 제어 : background-repeat : repeat-x / repeat-y / repeat / no-repeat
이미지 위치 : background-position
html - img 태그 / css background url
html 지정 : 비율은 깨질 수 있지만 이미지가 잘리지 않는다.
css 지정 : 배경의 크기에 따라서 이미지가 잘릴 수 있다.
*로고 등의 정보를 담고 있는 이미지는 html-img 태그로 지정해야한다. (ex.네이버,다음)
img src="" alt="네이버 로고"
