본문 바로가기
반응형

분류 전체보기163

[ CSS 입문 ] font속성 | 개요 font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다. 정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 사용이 가능합니다. font-style : 이탤릭체 등의 글꼴 스타일을 지정 font-weight : 글자 두께 (숫자 또는 bold, normal 등) font-variant : 글꼴 변형 (소문자를 대문자로 바꾸는 등) font-size : 글자 크기 line-height : 줄간격 font-family : 글꼴 (굴림, 돋움 등) letter-spacing : 글자 간격 text-decoration : 글자 데코 (밑줄, 윗줄, 중간줄 등) | 사용법 font-style 글꼴의 스타일로 주로 이탤릭체(기울여 .. 2018. 9. 10.
[ CSS 입문 ] color 속성 | 개요 color 속성은 단어 뜻대로 색상이지만 CSS에서는 더 정확하게는 "글 색상" 입니다. red, blue 등 이미 정의된 색 #000, #ffffff 등의 16진수 색상 코드 rgb(255, 255, 255) 등의 rgb색상 rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba색상 color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit 으로 부모의 색상을 가져옵니다. | 사용법 * { color: red; } /*전체(*)에 글 색상 red를 주어라*/ #text1 span { color: #0A0; } /*text1의 아이디 하위 span태그에 글 색상 #0A0를 주어라*/ div#text1 { color: rgb(0, 0, 150); } .. 2018. 9. 9.
[ CSS 입문 ] margin, padding 속성 | 개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. 한 선택자의 바깥쪽으로 여백을 넣고 싶다고 한다면 "margin" 한 선택자의 안쪽으로 여백을 넣고 싶다고 한다면 "padding" 으로 기억을 하면 쉽습니다. 단, 여기서 바깥쪽 여백을 주는 margin을 입력한다면 선택자의 전체 width값에는 변화가 없습니다. 바깥쪽을 기준으로 여백을 주므로써 선택자의 위치를 변경해줄때 사용될 수 있습니다. 안쪽 여백을 주는 padding의 경우 선택자의 전체 width값이나 height값이 변경이 됩니다. 기존 width값과 height값을 유지하고 싶다면 padding을 준만큼 width와 he.. 2018. 9. 8.
"개판"애견 놀이터 가즈아! - 인천 도림동 애견카페 주소 : 인천 남동구 도림동 338-3연락처 : 032-433-7802영업시간 : 매일 11:00 - 21:00둘째, 넷째월요일 휴무 라떼랑 어디를갈까? 하던중다른 블로거님의 글에서 발견한 곳입니다. 저희 라떼가잔디있는 곳을 좋아해서 잔디도 많이 있고집에서도 가까워서 놀러가게 되었습니다. 네비찍고 가시다보면도림동 도림Self주유소 옆 골목길로 들어가셔야합니다~ 먼저 큰 애견 운동장이 보이실꺼에요그리고 건물이 아니고 비닐하우스를 개조해서 안은 이렇게 멋지게 꾸며놓았네요! 생긴지 4개월 밖에 안됐다고 하시더라구요사장님,지원분들 엄청 친절해요친절도 별점 5개중 5개 드릴정도로^^​ 중성화 안되어있는 반려견은 출입불가해요ㅜ그대신!매너벨트착용시 가능!!이용수칙한번 쓰으윽 눈팅을~ 처음 저희 라떼가 공격성(?)이라.. 2018. 9. 7.
[ CSS 입문 ] width, height 속성 및 길이 단위 | 개요 width 와 height 속성은 HTML과 동일하게 "가로길이, 세로길이"를 의미합니다. 값을 정의 할때는 "100px" 처럼 숫자 뒤의 단위를 같이 작성하며 단위에 따라서 값이 다르게 표기됩니다. 아래의 길이 단위는 꼭 width와 height 속성에만 작성되는것이 아니라 font 사이즈나 다른 속성들의 사이즈를 잡는데 있어서도 사용되는 단위 이므로 꼭 확인 하도록 합니다. [ 절대 길이 단위 ] px - 픽셀(pixel), 컴퓨터 화면에서 사용되는 단위로 1px은 컴퓨터 화면에서 점 1개와 같음 mm - 밀리미터 cm - 센티미터 (1cm = 10mm) in - 인치 (1in = 2.54cm) pt - 포인트(point), 주로 인쇄매체에서 사용 (1pt = 1인치의 1/72) pc - 피.. 2018. 9. 7.
[ CSS 입문 ] CSS 속성 | 개요 HTML과 비슷하게 CSS도 특정한 기능을 하는 속성들이 미리 정의가 되어 있으며, 이를 잘 활용하여 태그의 스타일을 정의 할 수 있습니다. "속성 : 값"의 형태로 사용되며, 여러 속성끼리는 ; (세미콜론)을 통해 구분됩니다. 하나의 선택자의 속성들을 한줄로 쓰든, 여러줄로 나누어 쓰든 상관 없으며 작업자의 편의에 따라 작성하면 된다. 선택자{ 속성1: 값1; 속성2: 값2 } /* or */ 선택자{ 속성1: 값1; 속성2: 값2; } 브라우저의 개발자툴을 이용하면, 특정 태그에 어떤 CSS 속성이 사용되었는지 쉽게 알 수 있습니다. 그리고 브라우저 내에서 미리 스타일을 변형해보고 추가적인 브라우저의 특정 앱들을 이용하면 바로 코드로 저장되어 사이트에 적용까지도 가능합니다. 이 방법을 가지고.. 2018. 9. 7.
[ CSS 입문 ] 가상 클래스 선택자 | 개요 선택자 뒤에 ":가상이벤트"를 같이 사용하게 되면 각 이벤트에 따라 스타일을 적용할 수 있습니다. 이 내용을 가상(추상)클래스라고 합니다. :link - 방문한 적이 없는 링크 :visited - 방문이 있었던 링크 :hover - 마우스를 해당 부분에 롤오버 했을 때 :active - 마우스를 해당 부분에 클릭 했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first-child - 첫번째 요소 :last-child - 마지막 요소 위 내용은 가상(추상)클래스의 대표적인 예시이며 미리 정의된 가상 클래스를 효과적으로 이용하면 웹상에서 좀 더 동적이고 효과적인 스타일을 적용할 수 있습니다. | 사용법 table .box:first-child { background-color:.. 2018. 9. 6.
사고뭉치 울집 댕댕이, 라떼 - 벨트피해사건 사건의 전말은 이렇다. 이날은 내가 지인들과 저녁약속이 있어남편이 먼저 집에가는 날이었다. 남편이 퇴근하고 집으로 간다는 카톡이 왔다. 남편 : 하..남편 : (사진) 나 : 잉? 이게 뭐야?남편 : 이게 뭘까? ㅋㅋ 라떼가 먹었어나 : 이게뭐야? 모르겠는데?남편 : 작은방에 라떼가 들어가서 난장판을 만들어 놨는데, 이녀석 어떻게 들어간거지?;;남편 : (사진) 그렇다..강아지를 키우는 우리는 각 방 입구에 출입을 막기위해작은 문을 설치했다. 그런데 이녀석..어떻게 들어갔는지작은방에 들어가서나오지도 못하고 저러고 있다가엄마 아빠 옷이 많으니 그거 가지고 신나게 논듯하다 ㅋㅋ 다행히 전선은 안물어 뜯었다..(그나마 다행) 그리고 또 다른 흔적..행거 뒤쪽을 보니한참동안 여기에 갇혀있었는지노란토까지 했다.... 2018. 9. 5.
[ CSS 입문 ] 다중 조건 선택자 | 개요 CSS의 선택자 안에서 "AND"와 "OR"과 같이 선택할때 다중선택이 가능합니다. 태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 태그이름.클래스명 { 속성1:속성값; 속성2:속성값; } .클래스명#아이디 { 속성1:속성값; 속성2:속성값; } 앞 전 포스팅에도 살짝 나왔던 내용입니다. 이전 내용과 달리 중간 사이에 "공백"을 없애게 되면 여러개의 조건을 만족하는 선택자를 찾게 됩니다. 앞의선택자이면서 뒤선택자가 만족하는 선택자를 찾게 됩니다. 선택자는 태그선택자, 아이디선택자, 클래스선택자 등 모든 선택자가 사용 될 수 있습니다. #아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; } 선택자와 선택자 사이 공백에 쉼표(,).. 2018. 9. 5.
반응형

티스토리툴바