Fullstack-Study-241204-250625

커리큘럼

01. HTML,CSS  (v)
02. git
03. Java
04. Database
05. Jsp
06. 미니프로젝트

07. SpringFramework
08. SrpingBoot
09. React JS
10. 중간프로젝트

11. Linux 명령어
12. AWS 클라우드
13. Kotlin
14. Andriod
15. 최종프로젝트

---

공간 분할 태그

• 레이아웃 생성 시 사용

div     # block형식으로 공간 분할
span    # inline형식으로 공간 분할

블록/인라인

블록요소

• 줄바꿈과 블럭크기를 가짐

h1
p
div
ul
ol
table
form

인라인요소

• 줄바꿈이 없으며 블럭요소를 자식으로 포함할 수 없음

span
strong
small
a
img
input

시멘틱 태그

• 특정한 태그에 의미를 부여해 새 웹페이지를 만드는 시도
• div와 동일 (단순 의미만 부여)

header  # 헤더
nav     # 네비게이션
aside   # 사이드
section # 여러 ㅈ우심 내용을 감싸는 공간
article # 글자가 많이 들어가는 부분
footer  # 하단

---

CSS 기초

CSS문법

h1{
    color:red;
}

• css 적용방법
  • 외부 스타일 시트
  • 내부 스타일 시트
  • 인라인 시트

CSS 사용 단위

%       # 부모영역 지정된 크기에 대한 퍼센트
em      # 부모영역에 지정된 크기에 대한 배수단위
px      # 고정크기
vh      # 보여지는 화면크기에 대한 비율

선택자

• *: HTML 페이지 내부의 모든 태그 선택

    *{
        color:red;
    }

• 태그: 특정 태그 선택

    h1{
        color:red;
    }

• #아이디명 : 아이디 속성을 가지고 있는 태그 선택

    #header{
        width:800px;
    }

• .클래스명 : 클래스 속성을 가지고 있는 태그 선택

    .select{
        color:red;
    }

• 선택자A 선택자B : 선택자A의 후손에 위치하는 선택자B 선택(모든 자식)
• 선택자A > 선택자B : 선택자A의 후손에 위치하는 선택자B 선택(직계자식)

    #header h1{
        color:red;
    }

    #header > h1{
        color:red;
    }

• 선택자[속성] : 특정 속성이 있는 태그 선택
• 선택자[속성=값][속성=값]: 특정한 속성 안의 값이 특정 값과 같은 문서 객체 선택

    input[type=password]{
        background:blue;
    }

• 선택자[속성~=값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서객체 선택
• 선택자[속성!=값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서객체 선택
• 선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그 선택
• 선택자[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 태그 선택
• 선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그 선택

   img[src$=png] {
       border:3px solid red;
   }

• 가상 선택자

:active     # 사용자가 마우스를 클릭한 태그 선택
:hover      # 사용자가 마우스를 올린 태그 선택

:checked    # 체크 상태의 input태그 선택 
:focus      # 초첨이 맞추어진 input태그 선택
:enabled    # 사용 가능한 input태그 선택
:disabled   # 사용 불가능한 input태그 선택

폰트

font-family     # 폰트 설정
font-size       # 폰트 크기
font-style      # 폰트 스타일
font-weight     # 폰트 굵기
font            # font와 관련된 속성을 한꺼번에 설정

텍스트 속성

color               # 텍스트 색상
line-height         # 줄 간격 지정
letter-spacing      # 문자사이의 간격
text-align          # 텍스트 정렬 상태 (left,right,center,justify) <수평정렬>
vertical-align      # 나란히 배치된 요소에 적용해 수직정렬의 기준을 맞춤 (top,middle,bottom), inline, inline-block에만 적용
text-decoration     # 텍스트에 줄 표시 (none이 기본)
overflow            # 일정 공간에 글들이 넘칠 때 넘치는 것을 방지

 - hidden : 공간을 넘어간 글은 보이지 않음.
 - scroll : 스크롤이 생김.
 - visible : 다 보임 (기본값)
 - auto : 내용이 넘칠때만 스크롤 생김

white-space         # nowrap을 사용하였을 경우 공백은 유지하며 줄바꿈 기능을 사용하지 않음.

display 속성

• 태그의 영역 표현 방식을 지정하는 속성

none            # 화면에서 보이지 않음
block           # block 형식 지정
inline          # inline 형식으로 지정(크기,너비 지정 불가)    
inline-block    # inline-block 형식으로 지정(크기,너비 지정 가능)

background 속성

background              # 배경 속성을 한번에 지정
background-attachment   # 페이지가 스크롤 될 경우 배경의 이미지를 고정시킬 것인지를 지정
background-color        # 배경 색 지정 (배경 투명하게 할시 transparent 사용)
background-image        # 배경 이미지 지정   url('주소') 형식으로 지정        
background-position     # 배경 그림의 위치 지정
background-repeat       # 배경 이미지으 ㅣ반복 여부 지정

박스 속성

margin  : 박스의 외부 여백공간   # 박스의 위치 조정, 마진은 겹침 ex) margin-botttom:20px, margin-top:50px 이면 결론적으로 50px만큼 떨어짐.
padding : 박스의 내부 여백공간   # 패딩사이즈가 커지면 박스의 크기도 커짐
border  : 박스 테두리 두께, 선모양 ,색상

# 박스크기
content-box (기본값)
    - 박스너비 : width + padding(left,right)+margin(left,right)+border
    - 박스높이 : height + padding(top,bottom)+margin(top,bottom)+border
border-box >> (border제외)
    - 박스너비 : width+margin(left,right)
    - 박스높이 : height+margin(top,bottom)