프로그래밍/HTML & CSS
-
CSS - 영역 관련프로그래밍/HTML & CSS 2021. 9. 22.
width, height 자바 스프링 오라클/p> 서블릿 CSS 자바 스프링 오라클/p> 서블릿 CSS - width와 height 개념은 매우 중요하다. 완전 기초 - box 라는 클래스를 미리 만들어서 전체 틀로 사용 선 경계는 3px 두께에 선 패턴 모양은 dotted 색깔은 회색 내부 간격 30px 텍스트 중앙에 오게 하기 - box1 클래스 너비 200px 높이 30px 외부 간격 위아래20px 좌우10px - box2 클래스 너비 400px 높이는 최소 높이를 30px로 설정 외부 간격 20px 하고 위치는 가운데로 오게하기. box box1 클래스의 결과 이렇게 잘려서 나오는 이유는 box랑 box1 의 높이가 30px로 설정이 되어 있기 때문이다. box box2의 결과 화면 상에는 표시 ..
-
CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기프로그래밍/HTML & CSS 2021. 9. 21.
white-space = 요소의 공백 처리 방법 선택 white-space : 해당 요소의 공백 처리 방법을 결정한다. normal javascript html css java spring oracle mysql nowrap javascript html css java spring oracle mysql pre javascript html css java spring oracle mysql pre-wrap javascript html css java spring oracle mysql pre-line javascript html css java spring oracle mysql - white-space: normal; = 영역을 넘어가면 알아서 라인을 넘김 / 태그로라인넘김 - white-space: ..
-
CSS - 기초(4)프로그래밍/HTML & CSS 2021. 9. 18.
부정, 정합성 체크 셀렉터 아이디 : 패스워드 : 특수문자를 포함하지 않는 4~8자의 영문자 또는 숫자 이름 : 핸드폰 번호 : 확인 - 적합성 검사란 텍스트 박스에 내가 원하는 값들이 아닐때 나타나게하는 이벤트이다. HTML 부분 - 패스워드 부분 = pattern 옵션으로 4~8자의 영문자 또는 숫자만 입력 가능하게 해놈 - 핸드폰 번호 부분 = 마찬가지로 pattern 옵션으로 시작은 숫자3자리 - 숫자 3~4자리 - 숫자 4자리 끝 옵션을 준다. CSS 부분 - form input:not([type=password]) = form 태그 중에서 input 타입이 패스워드가 아닌 애들만 - form input[type=password] = form 태그 중에서 input 타입이 패스워드인 애들만 - ..
-
CSS - 기초(3) 가상 클래스 / 링크 셀렉터프로그래밍/HTML & CSS 2021. 9. 16.
링크 셀렉터는 말 그대로 링크에 여러가지 속성들을 줄 수 있다. 가상 클래스(Pseudo-classes) : 링크 셀렉터(Link pseudo-classes) 링크 | 구글 - a 태그에 총 4가지의 옵션을 주고 text에는 2가지의 옵션을 줬다. - a 태그- a:link = 내가 그 링크를 한번도 방문한 적이 없을 때 a:visited = 내가 그 링크를 한번이라도 방문 했었을때 a:hover = 내가 링크에 마우스를 올렸을때 나타나는 이벤트 a:active = 내가 링크를 누르고 있을때 일어나는 이벤트 - text 태그 - 먼저 input으로 type이 text인 놈과 타입이 password인 애들을 :focus로 초점을 맞춰준다.(텍스트 박스 클릭 했을때) 그리고 이제 뭘 할건지 속성을 주는건데 ..
-
CSS - 기초(2) / 선택자프로그래밍/HTML & CSS 2021. 9. 16.
Selector : 기본 셀렉터 프로그래밍 자바 C언어 코틀린 데이터베이스 오라클 mysql 빅데이터 웹 HTML CSS javascript 웹프로그램 JSP PHP ASP.NET - 선택자는 3가지 종류가 있다. - 선택자는 style 태그로 임베디드 이다. 미리 정의한다는 뜻 1. 태그 선택자 => 말 그대로 태그에 속성을 주는 것 ex)p {}, label {} 2. id 선택자 => id값을 지정하여 일치하는 요소를 딱 선택 이 값은 중복이 불가능한 유일한 값 ex) #myId {} 3. 클래스 선택자 => 아이디랑은 비슷하지만 값이 중복이 된다. ex) .myClass{} 다중 조건 선택자 다중 조건 선택자 스타일이 적용 되지 않는다. 스타일이 적용되지 않는다. 과목 웹 HTML CSS 자바스크..
-
CSS - 상속과 우선순위프로그래밍/HTML & CSS 2021. 9. 16.
상속이 가능한 놈과 불가능한 놈만 대략 적으로 알아두면 좋다. 우선순위 관련 스타일 우선 순위 CSS가 어디에 선언 되었는지에 따라 우선 순위가 달라진다. - div에 문구는 원래 link를 통해서 외부 css를 불렀기때문에 style3.css의 속성을 따라간다 하지만 본문에서 style을 다시 div에게 백그라운드 색깔을 검정으로 줬기때문에 검정으로 나온다. 이게 우선순위이다. 무조건 본문이 우선이다. 그리고 우선순위에도 어떤게 더 우선순위인지 알아야한다.(명시도) - 명시도 순서 - !important = 1순위 inline = 2순위 id = 3순위 클래스/어트리뷰/가상 선택자 = 4순위 태그 = 5순위 전체 선택자 = 6순위 상위 요소 상속 = 7순위 기본 = 맨 마지막 그리고 본문에서도 나중에 ..
-
CSS - 단위프로그래밍/HTML & CSS 2021. 9. 16.
단위 : em 단위(Units) : px 글자크기 : 14px 단위 : % 글자크기 : 13px * 1.2 = 15.6px 패팅 : 2 * 15.6 = 31.2 em단위는 그냥 2배라고 생각하면 된다. 대신에 자식에 까지 영향을 미치니까 내려가면 내려갈수록 엄청나게 커진다. box 클래스를 상속받은 div는 box에서 글자크기가 14px로 설정 되어있는데 맨 아래 padding 2em; 이렇게 되어있다 이건 14px가 2배가 된다는 얘기이다. 즉 글자크기는 14px지만 padding이 14의 2배인 28이 된다는 소리임. 밑에 p-box, c-box를 상속받은 div는 먼저 p-box의 13px 폰트 사이즈를 가져가고 이제 c-box의 폰트 사이즈 120%의 영향을 먼저 받아서 폰트 사이즈가 120%만큼..
-
CSS 기초(1) / 외부css 파일 가져오기프로그래밍/HTML & CSS 2021. 9. 16.
- CSS는 HTML을 꾸며준다고 생각하면 된다. - HTML은 a태그 p태그 등등 여러 태그들로 구성 되어 있는데 이 태그들을 그냥 화면에 출력하면 하나도 안이쁘다. - CSS는 이걸 사람이 눈으로 봤을때 예쁘게 꾸며주기 위한 도구 - 글자들 사이 공백을 주거나 색깔 밑줄 폰트 글자 크기 태그들의 배치 등등 이런 것들을 전부 CSS라고 한다. CSS 지정 방법 - CSS를 주는 방식은 크게 3가지가 있다. 1. 외부 link를 이용해서 외부 CSS 파일을 가져오기 2. inline 방식 => 태그들 마다 직접 주는것 3. embeded 방식 => 클래스를 지정해서 그 클래스에 해당 하는 태그들에게 적용 예제를 위해 외부 css파일을 임의로 만든다. 이 css파일 이름은 style @charset "UT..