프로그래밍 강의/HTML 과 CSS 검색 결과

해당 글 11건

[HTML/CSS] Chapter11. 반응선택자와 상태선택자 CSS

오늘은 CSS 반응선택자와 상태선택자에 관한 포스팅을 올리겠습니다. 선택자의 이름에서 느낄수 있겠지만반응선택자란? 말 그대로 반응을 일으키는 선택자!!-> 우리가 마우스를 버튼이나 기타 태그에 마우스를 올려놓으면 색상이 변한다거나 글자가 작아진다거나 등의 이벤트가 있죠!! 이러한 효과를 내는것이 반응선택자라고 할수있습니다. 상태선택자란? 말 그대로 상태와 관련있는 선택자!!-> 태그중 속성을 비활성화하면 색상이 회색이 되기도 하고 그 태그에 포커스가 잡혔을때 테두리가 바뀌는등 이러한 효과를 내는것이 상태 선택자입니다. # 반응선택자 예시 123456789101112131415161718192021222324252627282930313233Insert title here ul > li{ font-size:..
프로그래밍 강의/HTML 과 CSS 2018. 9. 21. 01:34

[HTML/CSS] Chapter10. 동위선택자 CSS

간단한 동위 선택자에 대해 알아볼께요!!동위 선택자란? 태그의 동등한 위치를 판단하여 CSS 속성을 설정하는 선택자입니다. 동위 선택자는 + , ~ 표현이 존재합니다~ : 나와 동급인 녀석들+ : 나와 동급인 녀석들중 나와 바로 밑에 붙어있는 녀석 1234567891011121314151617181920212223242526272829 h3~div{ color:green; } h3+div{ color:red; } 동위 선택자 테스트 div1 div2 div3 div4 Colored by Color Scriptercs h3~div : h3과 같은 레벨에 있는 div 태그들은 다 포함해라는 의미를 가집니다.h3+div : h3과 같은 레벨에 있는 div 태그중 h3 바로 밑에 있는 태그를 의미합니다.
프로그래밍 강의/HTML 과 CSS 2018. 9. 15. 02:44

[HTML/CSS] Chapter9. 후손 및 자손 선택자 CSS

후손 및 자손 선택자에 대해 포스팅하겠습니다. 후손의 범위가 넓을까요? 자손의 범위가 넓을까요? 나 , 아들, 손자가 있다고 예를 들어봅시다. 나를 기준으로 설명을 할께요나에게 아들은 자손이죠. 하지만 손자는 후손이지 자손은 아닙니다.나에게 손자는 후손입니다. 그러나 아들 또한 후손이 될수 있습니다. 이것과 똑같은 개념이라고 할수있습니다.후손 선택자는 특정 선택 태그안에 있는것들자손 선택자는 특정 선택 태그 바로 아래 계층에 있는것들이라고 생각하시면 됩니다. 코드를 보시면 쉽게 이해되실껍니다.ㅎㅎ 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 #header, #wrap{ border: 2px..
프로그래밍 강의/HTML 과 CSS 2018. 9. 15. 02:08

[HTML/CSS] Chapter8. 속성 선택자를 사용한 CSS

태그의 속성을 선택하여 CSS의 속성을 설정하는 법을 배워보겠습니다. 12345678910111213141516171819202122232425262728293031323334353637 input { color:blue; font-size:30px; } input[type=text] { color:red; font-size:50px; } input[type=password] { color:green; font-size:10px; } Colored by Color Scriptercs style 태그를 보면 3개의 설정이 되어있습니다. input , input[type = text ] , input[type=password]input : input 태그에 디자인을 이렇게 하겠다.input[type=text..
프로그래밍 강의/HTML 과 CSS 2018. 9. 15. 01:41

[HTML/CSS] Chapter7. id(#) , class(.) 을 이용한 CSS

CSS란 ? Cascading Style Sheets 의 약자로 쉽게말해 HTML 같은 문서의 스타일을 꾸밀때 사용하는 언어입니다. 오늘은 태그의 id , class 속성을 사용해서 CSS를 꾸미는 법을 포스팅하겠습니다. id를 사용해 CSS를 꾸밀려면 #을class 사용해 CSS를 꾸밀려면 .을 붙이면 됩니다. 1234567891011121314151617181920212223242526272829303132333435363738CSS id/class #header {width:500px; border:2px solid #cccccc; font-size:3em; text-align:center;} .menu { color:blue; font-weight:bold; font-size:30px;} Head..
프로그래밍 강의/HTML 과 CSS 2018. 9. 15. 01:22

[HTML/CSS] Chapter6. 블록요소와 라인요소

블록요소와 라인요소라 처음 들어보실수도 있고 쉽게 연상되지 않는 단어인것 같습니다.하지만 HTML의 태그는 두가지 요소중에 하나라는 사실!! 엄청 간단합니다. html태그중 개행을 해주는 태그는 무엇이죠? 바로 br 태그입니다. 블록요소란? 개행태그가 없이도 개행되는 태그라인요소란? 개행태그가 없으면 개행되지 않는 태그 블록요소 태그들:div , p ,li ...... 라인요소 태그들:input , span ...... 123456789101112131415161718192021222324252627282930313233 Insert title here block itme1 item2 itme3 block 1 block 2 block 3 block 4 inline1 inline2 inline3 inlin..
프로그래밍 강의/HTML 과 CSS 2018. 9. 14. 01:12

[HTML/CSS] Chapter5. Form 폼 태그!!

오늘은 HTML 태그중 가장 중요한 태그라 할수있는 Form 태그에 대해 포스팅하겠습니다. 폼 태그를 처음 접하시는 분들은 회원가입을 생각하시면 되겠습니다.사실 HTML은 프로그래밍 언어이지만 이해보단 많이 써본놈이 잘 씁니다.(단순암기에 가깝죠!!) 먼저 코드와 결과를 보시죠!! 12345678910111213141516171819202122232425262728Form 태그 강의 이름 : 비밀번호: 연락처: - - 사진: 성별: 남 , 여 취미: 농구, 축구, 농구 Colored by Color Scriptercs form 태그는 action 과 method 속성이 있습니다.action은 쉽게 말해서 내가 html을 요청하고 싶은 녀석을 적어주시면 됩니다. 보통 ~.jsp , ~.html 파일을 적어..
프로그래밍 강의/HTML 과 CSS 2018. 9. 14. 00:52

Chapter4. 테이블 태그!!

table 태그는 표형식의 레이아웃을 만드는 태그로 예전에는 많이 사용했지만 요즘에는 사용빈도가 많이 줄어들었습니다.그 이유는 유지보수가 어렵고 어떠한 정보가 바뀌었을때 번거롭기 때문입니다. 테이블을 만들기 위해서는 여러 태그가 필요합니다. table : 테이블을 만드는 태그tr : 행을 만드는 태그td: 열을 만드는 태그 12345678910111213141516171819202122232425262728 Insert title here 시험성적 국어 수학 영어 70 85 90 cs td의 속성중 rowspan 이라는 것이 있습니다.이것은 행들을 하나로 만들겠다라는 의미입니다. rowspan="3" 은 3행을 한개로 만들겠다는 의미가 됩니다.colspan이란 속성도 있는데 이것은 열을 한개로 만들겠다는..
프로그래밍 강의/HTML 과 CSS 2018. 9. 6. 01:22

Chapter3. 리스트 태그!!

자주 사용되는 리스트 태그에 대해 알아봅시다. ※ 리스트 태그 : ul,li,ol ul : unorder list 의 줄임말로써 순서가 없는 리스트입니다.ol : order list 의 줄임말로써 순서가 있는 리스트입니다.li : 리스트 태그이며 주로 ul 태그나 ol 태그와 같이 사용합니다. 12345678910111213141516171819202122232425262728293031 Insert title here 메뉴 리스트 라면 떡볶이 치킨 나라 리스트 대한민국 중국 러시아 검색 사이트 naver google Colored by Color Scriptercs 메뉴 리스트를 보게 되면 ul 태그안에 li 태그를 사용합니다.=> 순서가 없는 리스트를 만들겠다는 의미입니다. 나라 리스트를 보게 되면 ..
프로그래밍 강의/HTML 과 CSS 2018. 9. 6. 01:08

Chapter2. html 시작과 간단한 태그!!

HTML을 시작하기에 앞서 개발툴이 필요하겠죠!!인터넷 검색을 해보시면 여러툴이 있는데 저는 이클립스를 사용하겠습니다. .html 을 생성하게 되면 크게 head 부분과 body 부분이 만들어지게 됩니다. 123456789101112131415 Insert title here Hello Colored by Color Scriptercs 태그는 시작과 끝을 가지고 있습니다. 시작태그는 < , 끝태그는
프로그래밍 강의/HTML 과 CSS 2018. 9. 4. 02:10

Chapter1. Web 이란?

HTML을 수업하기에 앞서 간단한 용어 정리를 하고 넘어 가도록 합시다. Web?- 1개 이상의 사이트가 연결되어있는 인터넷 서비스의 한가지 상태를 말합니다.- 인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태를 말합니다.(인터넷의 많은 서비스중 하나가 우리가 흔히 볼수있는 WWW 입니다) http://naver.com:80/xxxx 프로토콜: 네트워크상에서 약속한 통신규약(http,FTP,SMTP,POP,DHCP)IP: 네트워크상에서 컴퓨터를 식별할 수 있는 주소(119.120.180.55)DNS: IP 주소를 인간이 쉽게 외우도록 맵핑한 문자열Port: IP 주소가 컴퓨터를 식별할 수 있게 해준다며, Port 번호는 해당컴퓨터의 구동되고 있는 프로그램을 구분할수 있는 번호 , default는 80..
프로그래밍 강의/HTML 과 CSS 2018. 9. 4. 01:13