본문 바로가기

IT/Web

【web기본】2021 10 26 : CSS 에 대하여

CSS 에 대하여

1. 목적 : 웹 문서를 꾸미기 (움직임 / 변형)

 

2. CSS 파일을 별도로 생성 하여 작업을 권장

=> ~~~.css

3. html 파일내에 css를 사용할 경우

=> <head></head> 사이에 <style></style> 태그를 이용하여 사용

=> 일반적으로 전체적인 공통 스타일은 ~~~.css 파일을 이용하여 적용하고,

특정 웹 문서의 일부분만 별도의 스타일을 적용할 경우에는 <style>태그를 사용하는 경우도 있다..

특정 태그만 별도의 스타일을 지정하고 싶을 경우,

=> 태그의 style=" " 속성을 이용하여 설정 가능

 

* 참고 : html 태그 속성과 style 속성은 별개

 

 

4. CSS 로 할 수 있는 것들

=> 전체 웹 페이지(문서)에 대한 공통 스타일 설정

=> 다국어 (CSS + XML)

=> 접속 웹 브라우저에 대한 처리

=> 사용자 접속 기기에 대한 처리도 가능 (미디어 쿼리)


 

스타일 선언 방법

 

CSS 파일과 <style> 태그 내에서 선언 하는 방법

1. * { 스타일속성명 : 값 ; 스타일속성명 : 값 ; .... }

=> 모든 요소에 대한 공통 스타일 선언

 

2. 태그명 {스타일속성명 : 값 ; 스타일속성명 : 값 ; .... }

=> 동일 태그에 공통적인 스타일을 적용할 경우

3. 스타일클래스를 선언

.스타일 클래스명 {스타일속성명 : 값 ; 스타일속성명 : 값 ; .... }

=> 태그의 class="스타일 클래스명" 속성을 이용하여 별도로 설정 가능

=> 검색 (웹 크롤링)

 

4. 태그의 아이디명을 이용하여 스타일 선언

#태그의 아이디명 {스타일속성명 : 값 ; 스타일속성명 : 값 ; .... }

=> 태그의 id="아이디명" 을 이용하여 설정 가능

=> 검색 (웹 크롤링)

 


스타일은 특정 태그에 중복 설정이 가능

 

<style>

p {color : blue}

.red{color:'red' }

.blue{color:'blue' }

</style>

 

<body>

<p class='red blue' style="color:yellow"></p>

</body>

 

태그에 직접 스타일을 설정할 경우

<p style="color:blue"></p>

 

모든 <p>태그에 동일한 스타일을 적용할 경우

<style>

p {color : blue}

</style>

 


스타일이 중복 설정 되었을 경우, 스타일의 일반적인 우선 순위

 

1. 태그 내부에 style ="" 속성으로 설정

2.<style></style> 태그 내에 맨 마지막으로 지정한 스타일

 


프로그램 언어에서 색상 값

16진수 표현 (0~9 / a~f)

0xRGB / 0xRRGGBB

#RGB / #RRGGBB

 

=> 가정 : 밀폐된 공간에 빛이 없는 상태 : #000000

빨강색 빛을 벽에 투과 : #FF0000

녹색 빛을 벽에 투과 : #00ff00

파랑색 빛을 벽에 투과 : #0000FF

 

빨강색 / 녹색 빛을 벽에 투과 : #ffff00

 

회색 : #999999 / #cccccc / #444444

 

하얀색 : #FFFFFF

 


" ' ' " / ' " " '

 

<a herf="boardlist.jsp?no=1"> 이동</a>

String a ="test";

String b ="content";

String query = " insert into tbl (title, content) values ('"+ a +"','" + b+ "') ";

insert into tbl (title, content) values ('test', 'content')

Statement : executeQuery(query)

 

String query = " insert into tbl (title, content) values (? ,?) ";

PrepareStatement

PrepareStatement.setString(1, a);

PrepareStatement.setString(2, b);

executeQuery( )

 


웹에서의 모든 경로는 반드시 상대 경로로 설정!!!!!!

 

경로 : 절대(c:/~~/~~/~~) / 상대 (./~~~/~~ ) (../~~/~~~)

 

상대 경로 : . : 현재 위치

.. : 부모 위치

 

cmd : cd 폴더명 : 해당 하위 폴더로 이동

cd .. : 상위 폴더로 이동

cd\d:\폴더명

 

dir : 현재 위치에 있는 폴더 및 파일 리스트

dir /p : 현재 위치에 있는 폴더 및 파일 리스트를 페이지 단위로 ...

dir /s : 현재 위치에 있는 폴더 및 파일 리스트를 하위폴더까지...

 

md : 폴더 생성 ( md test ) / 현 위치의 하위 폴더 test를 생성

 

copy : 파일 복사

 

day_2_css.war
0.03MB

반응형