본문 바로가기
반응형

코딩121

조화 : 상속 조화 : 상속 (생활코딩) 상속 : 부모의 엘리먼트의 속성을 자녀의 엘리먼트가 물려받는 것. CSS에서 상속은 생산성을 높이기 위한 것임. # 주석 : /*, */ (무시) 조상 : htm{color:red:} --> 모든 웹 정보가 붉은색으로 표기부분적 선택 : #select{color:black;} --> li id=select인 곳만 검은색body{border:1px solid red;} --> 바디의 모든 태그가 붉은 테두리 --> 단, 테두리는 상속되지 않음. 생산성을 위해, 상속이 되는 것이 있고, 안 되는 것이 있다. https://www.w3.org/TR/CSS21/propidx.html : 상속과 관련된 정보 (CSS2) 2017. 2. 19.
웹 폰트 웹 폰트 (생활코딩) 사용자가 혹시 폰트가 없으면, 글자가 깨짐. 웹 페이지에서 폰트를 사용할 수 있는 방법. (폰트를 서버에서 다운받는 방식) 구글에서 제공하는 웹 사이트 (https://fonts.google.com/?authuser=1) 무료! 내가 직접 웹 폰트를 만들고자 할 때, web font generator를 사용해서 다운로드 받은 후 에디터에 입력을 하면된다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui eget lore.. 2017. 2. 17.
타이포그래피 font, 서체 타이포그래피 font, 서체 (생활코딩)font-family글꼴 설정, 사용자가 해당 글꼴이 없을 경우를 대비하여 여러가지를 쓰는 경우가 많다. (arial, verdana, "Helvetica Neue" font-weight굵기 지정 line-height문장 사이의 간격 (지간), px 절대적 단위를 피하고 숫자로 기입할 것. font위 세가지 사항을 한꺼번에 적을 수 있는 것. 단순화 font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 순서를 지키는게 중요. # serif;는 글자체의 장식,.. 2017. 2. 17.
타이포그래피 텍스트를 정렬하는 법 (text-align) 타이포그래피 텍스트를 정렬하는 법 (text-align) (생활코딩) 텍스트를 정렬하는 속성 : text-align을 다룸. # text-align 4가지 속성- left : 왼쪽- right : 오른쪽- center : 가운데- justify : 양쪽 # justify = 양쪽을 균등하게 만들어준다. (텍스트 사이의 간격을 가변적으로 바꿈) # Loren Ipsum : 의미없는 텍스트를 모아놓은 곳. 2017. 2. 17.
타이포그래피 color 타이포그래피 color (생활코딩) 컬러를 표현하는 세 가지 방식. 1. color name2. Hex (16 진수를 쓴다. -- #00FF00)3. RGB(Red, Green, Blue) -- rgb(256, 0, 0) 256이 최대 -- 1, 3을 많이 쓴다. 2017. 2. 17.
타이포그래피 font-size 타이포그래피 font-size (생활코딩) 타이포그래피(글자 디자인 = 서체) 하위 태그들을 공부한다. 폰트 사이즈 단위 : pm, rem, em pm : 픽셀은 고정된 크기. em, rem : 사용자에 따라, 유동적으로 크기가 변함. 이제는 rem을 쓴다. 그 이유는 폰트 크기를 조절할 수 있는 사용자의 권리를 존중. 줌인하면 rem은 가변적으로 바뀜, px는 고정. 그러니까, 폰트 사이즈는 rem을 쓰면 된다. 2017. 2. 17.
속성을 공부하는 방법 속성을 공부하는 방법 (생활코딩)마이크로소프트 (bing 검색엔진) 에서 전세계 통계를 낸 것. CSS 효과를 속성이라 부르는데 그러한 속성이 약 250개가 있다. 1. 타이포그래피 2. 컬러 3. 박스모델 빈도 수가 높은 순으로 공부한다. 다 외울 필요는 없고, 빈도 수가 높은 거는 알고 있고, 낮은 거는 잘 찾아보면 된다. 2017. 2. 17.
여러가지 선택자 여러가지 선택자 (생활코딩) (만약 CSS 초심자라면 이것을 공부하는 것 보다는 나머지 진도를 우선 나가는 것을 권해드립니다.) CSS를 끝내고 들을 예정. 2017-02-16 20:54 pm 2017. 2. 16.
가상 클래스 선택자 가상 클래스 선택자 pseudo class selector : 가상 클래스 선택자! 클래스 선택자처럼 행동하지만, 클래스 선택자는 아닌 선택자. (여러 요소에 의해 어떤 태그를 그룹핑함) 가상 클래스 선택자의 형식이 있다. active, hover, focus, visited (visited는 보안상의 문제로 일부 속성만 가능) 2017. 2. 16.
선택자 공부 팁 선택자 공부 팁 (생활코딩) 선택자는 주어 같은 역할을 하기 때문에 굉장히 중요. 셀렉터 모음 게임 (flukeout.github.io) css언어 셀렉터를 적재적소로 잘 쓸수 있는 지 게임을 통해 나와있음. 하지만, 그것을 모두 기억하면 좋지만, 힘드니까 치트시트(Cheat Sheet) : 컨닝 페이퍼 구글에 CSS Cheat Sheet selector를 검색하면 모음집이 나와있는데 이것을 보고 작업하면 편리하다. 2017. 2. 16.
부모 자식 선택자 부모 자식 선택자 (생활코딩) ul li {color : red ;} ul 태그의 부분에 해당하는 li 태그만을 붉은 색으로 태그가 두개이기 때문에 자손 태그인 li 에 테두리 1px 단선 빨간색으로 지정. #을 붙인다. 예제 - parent_selector_selector_1.html123456789101112131415161718192021222324252627282930313233 ul li{ color:red; } #lecture>li{ border:1px solid red; } ul,ol{ background-color: powderblue; } HTML CSS JavaScript HTML CSS selector declaration JavaScript 결과 값. 1. 조상 자손 선택자 ul 아.. 2017. 2. 16.
선택자의 종류 선택자의 종류 (생활코딩) 선택자 종류1. 태그 선택자 : 모든 선택자에 디자인을 적용. 2. id 선택자 : 고유의 하나 태그에만 값을 지정하여 디자인을 적용. CSS에만 효과를 주고 싶다면 id 선택자를 써야 한다. select 앞에 #을 주목하라. 3. 클래스 선택자 : 여러 개의 태그를 (class)그룹핑해서 디자인을 적용. 다른 태그와 상관없이 속성 값을 그룹핑하여 줄 수 있다. HTML 약속 위반. Because, id는 식별하기 위한 것임. HTML 다른것도 마찬가지고.. head 태그에서 안에 있는 #deactive가 .(점)deactive.로 바뀌어야 한다. 2017. 2. 16.
선택자와 선언 선택자와 선언 (생활코딩) 태그 목록을 스타일 태그에서 꾸며주는 것. 선택자와 선언. CSS 기본적 문법- 디자인하고자 하는 태그를 선택자라고 함.- 그 선택자에 적용할 CSS를 선언. li : 선택자 color:red; : 선언 2017. 2. 16.
HTML과 CSS가 만나는 법 HTML과 CSS가 만나는 법 (생활코딩) CSS 1. 코드 차원에서 바라보는 것. 2. css를 html에 어떻게 정착 시킬 것인가. 이 두개의 기능을 만나게 할 수 있는가. CSS를 실행하는 방법은 2가지가 있는데... 먼저 인라인 방식을 살펴본다. 1. 인 라인 (In line) 방식 Hello world 파랑 : html 문법, 빨강 : CSS 문법 2. 임베디드 방식 Hello world Hello world 1, 2 두가지 방식 모두 css에 html을 결합시키는 방식임. 2017. 2. 15.
실습환경 실습환경 (생활코딩) CSS의 실습환경 1. 웹 브라우저 2. 간단한 에디터 - 메모장, Atom 등 # 웹 브라우저에서 윈도우 : Ctrl + O = > 파일열기 실습 준비 끝. # ATOM 다운로드https://atom.io/ git 재단에서 지원하는 무료 에디터. emmet 인스톨! Tab, 자동완성. 2017. 2. 15.
반응형

티스토리툴바