목록2017/03/30 (10)

Binary World

<CSS> Table

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778CSS Table/*table, th, td { border: 1px solid grey; border-collapse: collapse;}*/th, td { border-bottom: 1px solid grey; border-collapse: collapse;}table { width: 100%;}thead tr { background: #ebebeb;}/*:nth-child(even) - 짝수번째 자식 요소:nth-chilc(odd) - 홀수..
개발자의 길/Web Programming 2017. 3. 30. 17:32
<CSS> List

1234567891011121314151617181920212223242526272829303132333435363738394041CSS List#menu { list-style-type: none;}/* 부모요소 자식요소 */#menu li { display:inline-block; border: 1px solid black; width: 80; text-align: center; background: darkgrey; color: white;}#menu li:HOVER { background: red;}CSS List Java HTML CSS JavaScript Java HTML CSS JavaScript cs
개발자의 길/Web Programming 2017. 3. 30. 16:24
<CSS> Link

- inline 요소들은 width/height 값을 설정할 수 없음!- 예외)display 프로퍼티를 inline-block하면 화면 배치는 inline처럼 가로로 배치 block 요소처럼 width/height를 설정할 수 있음 1234567891011121314151617181920212223242526272829303132333435363738394041Linka{ text-decoration: none; border: 1px solid hotpink; display: inline-block; width: 80px; height: 20px; text-align: center;}/* pseudo class는 ":예약어" 형식으로 사용 */a:hover { /* 마우스가 a 태그 위에 있을 때 */ ..
개발자의 길/Web Programming 2017. 3. 30. 16:02
<CSS> Text

12345678910111213141516171819202122232425262728293031323334353637383940414243CSS Textbody { /* 텍스트 색상 */ color: blue;}/* 텍스트 정렬 */.cls-left { text-align:left; text-decoration: underline;}.cls-center { text-align:center; text-decoration: overline;}.cls-right{ text-align:right; text-decoration: line-through;}p { text-indent: 20px;} SCC TextLeftCenterRight서울에사는 천모씨(31)가 오늘 오후 다른 강의실로 원정을 떠나겠다며 선언했습..
개발자의 길/Web Programming 2017. 3. 30. 15:12
<CSS> Margin

1234567891011121314151617181920212223242526272829Margindiv { border: 2px solid black;}.cls-margin {/* margin-top: 10px; margin-right: 20px; margin-bottom: 40px; margin-reft: 30px; */ /* margin: top right bottom left; */ margin:30px 40px;} CSS Margin여기는 단락1입니다.여기는 단락2입니다.여기는 단락3입니다.Colored by Color Scriptercs
개발자의 길/Web Programming 2017. 3. 30. 14:57
<CSS> Box Model

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455Box Model.c1 { border: 4px solid black;}.c2 { border: 4px dotted red; margin: 10px;}.c3 { border: 4px dashed blue; padding: 10px; margin: 20px;}.c4 { border-width: 10px; border-style: groove; /* solid, dotted, dashed, groove, ridge, inset, none, ... */ border-color: red;}.c5 { height: 100px; bord..
개발자의 길/Web Programming 2017. 3. 30. 14:49
<CSS> Color삽입

- CSS 색상 표시 방법1. 색상 이름을 사용: red, green, blue, ...2. rgb 함수 사용: rgb(r, g, b) -> 0 ~ 2553. 16진수 사용:#RRGGBB -> 00 ~ FF 12345678910111213141516171819202122232425262728CSS Color.color-red{ background-color: red;}.color-green{ background-color: rgb(0, 255, 0);}.color-blue{ background-color: #0000FF;}.color-hotpink{ background-color: hotpink; font-size: 38px;}CSS ColorREDGREENBLUEcs
개발자의 길/Web Programming 2017. 3. 30. 12:07
<CSS> Selector(선택자)

1. Element(요소), Tag(태그) 선택자: HTML 태그2. Class: HTML 태그 안에서 class 속성의 값3. ID: HTML 태그 안에서 id 속성의 값 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859CSS Selector/* CSS 주석*//* 1. 태그(Element) 선택자 */div { color: crimson;}/* 2. 클래스 선택자: .클래스이름 */.c1 { color:blue;}.c2 { color:green;}/* 3. 아이디 선택자: #아이디이름 */#i1{ color:purple;}#i2{ color:orange;}..
개발자의 길/Web Programming 2017. 3. 30. 11:22
Prev 1 2 Next