웹 개발 기본지식 – CSS(Cascade Style Sheet)

여는 글

여기서 다룰 내용은 CSS가 웹페이지에 적용될 때 어떠한 순서로 적용되는지, CSS에 적힌 내용이 어떻게 구분되고, 각 항목별 단위가 의미하는 것은 무엇인지 알아해보고자 합니다. 파이썬보다는 블로그 작성에 조금 더 도움이 될 수 있을 것 같습니다.

 

블로그를 만들때에도 CSS가 중요하게 사용되지만, 웹페이지상 특정요소를 선택할때에도 CSS에 대해 아는것은 꽤나 중요한 편인데요, 이는 특정 요소를 선택하는 경우에 BeautifulSoup에서

[driver.find_element(by=By.CSS_SELECTOR, value=○○○).send_keys()]의 형태로 사용되는 경우가 많기 때문입니다.

 

 

CSS의 적용방법과 우선순위 적용 순서

1. 개요
   • CSS의 용도 : 글꼴이나 배경색, 너비와 높이, 위치 등 레이아웃을 일골 지정하기 위한 기능
   • CSS블록 구문 : 선택자, 스타일 속성, 스타일 값 (예시 : p{color : blue;})
2. 적용방법
   • in-line style : 스타일을 지정할 태그에 선언(예시 : p style = “스타일속성 : 스타일값”)
   • internal style sheet : ~ 태그 사이에 태그를 선언하고, 그 내부에서 스타일 선언 (특히, 구글블로그는 이러한 방식을 사용하는데, style태그가 아닌 b:skin 태그를 사용하며, 대신 개별 위젯에서 style 태그를 사용한다.)
   • CSS파일 활용 : /

 

CSS의 스타일 - CSS3 단위 및 그라디언트

1. 절대단위 : 고정된 값(주로 픽셀)이며, 매체에 따라 달라지지 않음. 프린트 레이아웃 등 출력 매체가 정확하게 확정된 경우에 사용함
2. 상대단위
   • 개요
     • 다른 길이 등록 정보와 관련된 길이를 지정하는 형태
     • 특히 em, rem 단위가 확장 가능한 레이아웃을 만드는데 실용적임
     • viewport란 브라우저 창 크기를 의미하며, 이를 토대로 한 단위 vw가 있음(viewport가 50cm이면, 1vw = 0.5cm)
   • 단위 종류
     • em : 특정 요소(element)의 글씨크기 대비 사이즈 (ex. 2em은 현 글씨크기의 2배를 의미)
     • rem : 최상위 요소의 글씨크기 대비 사이즈
     • vw : 1vw = 뷰포트 좌우크기 대비 1%
     • vh : 1vh = 뷰포트 상하크기대비 1%
     • vmin : 뷰포트의 작은 길이 대비 1%
     • vmax : 뷰포트의 큰 길이 대비 1%
     • % : 부모 요소 대비 상대 사이즈
3. 색상 단위 : 주로 16진수 3자리, 6자리값을 사용(#FFFFFF, #FFF 등)
4. 그레디언트
   • 방법 : background 등 속성에 linear-gradient([각도], 시작색, 끝색)의 형태로 지정한다. 이때 색에 해당하는 부분은 색상 단위를 사용한다. 각도는 비우고 실행해도 무방하다(기본값은 180도, 상단에서 하단방향).
   • CSS3부터 그레디언트 기능 지원(이전 버전까지는 이미지로 제작 처리했음)

 

728x90

 

CSS의 스타일 - CSS3 속성

1. 가시속성
   • 태그가 화면에 보이는 방식
   • 키워드
     • none : 태그 적용을 받는 문구가 화면에서 보이지 않도록 적용
     • block : 태그 적용을 받는 문구가 별도의 블록에서 보이도록 적용(줄바꿈 및 상하여백발생)
     • inline : 태그가 기존의 줄에서 벗어나지 않은채 서식이 적용되도록 적용
     • inline-block : 태그적용을 받는 문구가 기존의 줄을 벗어나지는 않으나, 포함된 줄의 상하에 여백이 발생함
2. 박스속성 : margin, border, padding, width, height
3. 배경속성 : background, background-image, background-position, background-size, background-repeat, background-color 등
4. 폰트속성
   • font-size: 글자의 크기를 지정
   • font-family: 폰트 종류를 지정
   • font-style: 폰트 기울기 지정
   • font-weight: 폰트 두께 지정
   • text-align: 글자의 정렬 지정
5. 위치속성
   • 개념
     • 절대적 위치좌표 : 요소의 x,y 좌표를 설정해 절대적으로 위치를 지정함
     • 상대적 위치좌표 : 요소를 입력한 순서대로 상대적으로 위치를 지정함
   • 속성값
     • static: 태그가 위에서 아래로 순서대로 배치
     • relative: 초기 위치 상태에서 상하좌우로 위치를 이동
     • absolute: 절대적 위치 좌표를 설정
     • fixed: 화면을 기준으로 절대적 위치 좌표를 설정
     • overflow: 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정
     • hidden: 영역을 벗어나는 부분을 보이지 않게 함
     • scroll: 영역을 벗어나는 부분을 스크롤로 지정