2025-04-21 [24일차] -(HTML & CSS) /보강
수업정리
HTML
- 화면(사용자에게 보여지는 부분) 을 구성
- 태그(Tag,컴퓨터에게 알려주기 위해서)로 구성
- 태그 (여는 태크, 닫는 태크) 로 되어있다
- 여는 태그와 닫는 태크가 아닌 하나의 태그로만 되어있는 경우도 있다
- 태크는 이미 정의 되어 있는 것들이 많음
- 그렇지만 우리가 만들어서 사용할 수도 있다
CSS (스킨)
- Cascading Style Sheet
- HTML로 만들어진 화면을 꾸미는 역할
- 태그를 찾아가서 스타일을 부여
- 사용할 수 있는 많은 스타일이 이미 정의되어 있다
HTML : 배우 /엘리먼트
CSS : 스타일리스트
JS : 감독
출력 화면 : 영화의 한 장면
HTML_PART
태그: "<"와 ">"로 묶인 일련의 명령어 입니다.
시작태그 : <a>
종료태그 : </a>
빈태그 : <br />, <hr />, <img />등태그의 구성 : 시작태그는 "속성(attribute)"과
"값(value)"을 가질 수 있습니다.
ex) <a href="http://opentutorials.org">
href = 속성 / "http://opentutorials.org" = 값<a href=""></a> 에서 href는 태그가 가지고 있는 속성 (attribute!)
디스플레이 속성이랑 다르다<br> 태그 : 띄어쓰기 용도로 사용
여는태그, 닫는 태그 두개가 아닌 하나의
태그이기에 부모가 될 수 없음
br 태그는 띄어쓰기 기능만 있기에 나머지 기능들
- 선택자 등 사용 x -
(예외로 선택자 사용 가능한 태그도 있긴함)요소(Elements) :
내용을 포함해 시작태그와 종료태그까지를 엘리먼트라고
한다.
[태그와 엘리먼트 ](https://opentutorials.org/module/966/6986)
HTML 태그들 중에서
디스플레이 스타일 속성이 블록으로 잡혀있는 태그
-> 우리가 많이 사용할 태그들!
section article div nav ->
디스플레이 스타일이 블록속성으로
잡혀있는 태그들 (이중 div 사용지분이 8할)
인라인 블록으로 잡혀있는 태그
->
태그 > 디스플레이 속성에서 none을 굳이 써야 하는 이유
단순하게 화면에서 없애는게 아님! 화면의 구성품으로
존재하지만 잠깐 가리는 능력
(네이버 홈페이지-> 클릭하면 나오는 구성요소들 생각하면 쉬움)
a 태그 예시
- 네이버 홈페이지로 이동
<a href="https://www.naver.com"
target ="_blank">네이버로 이동 </a>
target = "_blank을 쓰는건 코드펜 한정코드펜은 html 시뮬용이어서 타 홈페이지로 직접적인
이동이 제한적이기에 targer = "_blank"를 써서
원활하게 이동시키기에 코드펜 사용할때만 알아두기
CSS_PART
디스플레이 속성
inline-block
너비가 설정되어 있지 않다면, 최소한으로 줄어든다(0이 된다)
높이가 설정되어 있지 않다면, 최소한으로 줄어든다(높이는 가져야함)
-> 요소가 가진 데이터 때문에라도 높이는 가져야함
inline-block의 글자화의 본질)
한 줄에 최대한 여러개가 나온다(공간이 있는선에서 최대한)
block
너비가 설정되어 있지 않다면, 최대한으로 넓어진다(화면선에서 최대한 넓어짐)
높이가 설정되어 있지 않다면, 최소한으로 줄어든다(높이는 가져야함)
block의 블록화의 본질
한 줄을 무조건 혼자 쓴다(공간이 있어도)
none
안보이게 한다
- 디스플레이 속성 확인은 글자 넣어보며 한줄인지 여러 줄 쓰는지 확인해보기
HTML 태그들간의 관계
부모 자식 자손
px(픽셀 기준)
em( 1em.. 2em.. 3em -> 부여되어 있는 배수 (1배, 2배, 3배) /
rem(rem에서 r은 root, 즉 최상위 엘리먼트에서 지정된
font-size의 값을 기준으로 변환된다.)
em과 비슷하지만 다르다
css 꾸며주기
color :red;
font-size: 5rem;
font-weight : bold;
letter-spacing: 40px;
text-decoration : underline;
- 원하는 색상 만들기 : 구글 컬러피커에서 rgb 조합후
css에서 color : rgb(120,150, 88); 입력 - 투명도 조절 - > color : rgba(120,150, 88, .9;
- 핵사코드로 색상 조절 -> color : #000000;
HTML 정렬방식
텍스트정렬 (문자 정렬 + inline 요소 정렬/글자 취급이기에)
- 스타일 속성을 부여한 태그에게 직접 적용되는게
아니라 해당 태그가 가진 데이터/ 자식에게 적용이 된다
(text_align : secter --> 가운데 정렬)
블록 정렬
가상요소 선택자
ex) 안녕이라는 글자에 마우스를 올리면 출력되게~
div : hover {
color: red
}
내가 원하는 부분을 띄어쓰기 하고 싶을때
개행문자
-> (공백 1칸씩 늘려줌)_
text-decoration : none;
a {
font-size : 5rem;
text-decoration : none;
}
밑줄 없게 하기
GEN 코딩
- 태그 여러개 만들때
div>nav*3>div*2젠코딩에서 옵션 주고 싶을때
a[href="값"] {출력문자} 하고자 하는 거(반복일수도 있고.. 그외 다른것들)a 태그 1부터 100까지 태그 만들기
a[href="$"]{$}*100
$는 자동증가 값이 자동으로 늘어남
보이는 부분 {$}에도 자동증가로 설정해
보이는것과 내부에서 늘어나는것들을 서로 맞춰주기https://www.w3schools.com/에서
html과 css에서 태그 쓰고 싶은것들 참고
자바, DB 틈틈히 공부하기
