본문 바로가기
반응형

코딩121

그래픽 : 혼합(blend) 그래픽 : 혼합(blend) - 생활코딩 두 가지 이미지가 있을 때, 이미지가 가지고 있는 색상 차이를 어떠한 기준으로 혼합하여 색다른 이펙트를 주는 색을 만드는 것임. 포토샵 등을 통해 했어야 하는 작업을 CSS나 코드를 통해 효과를 줌으로써 다양한 선택의 권리를 가짐. background-blend-mode를 통해 설정 가능. (red, yellow 등) rgb : 색깔 (255, 0, 0) rgba : a는 투명도를 지정 (255, 0, 0, 0.5) .blend : hover { 사용자 상호작용} transition : 장면 전환 (ex : 어떤 것에 대하여 몇초 동안 효과) mix-blend-mode : 컨텐츠와 배경 통합. codepen.io : 다양한 효과를 확인할 수 있음. 2017. 2. 23.
그래픽 : 필터(filter) 그래픽 : 필터(filter) - 생활코딩 필터는 이미지에 다양한 효과를 주는 방법임. 효과를 코드로 줄 수 있다는 것. hover는 마우스를 올려놓았을 때, 발휘되는 효과. -webkit : 크롬용-o : 오페라용 2017. 2. 23.
그래픽 : 배경(background) 그래픽 : 배경(background)background : 이미지나 색깔 등을 지정할 수 있는 중요한 속성.background-color : red;background-image : url("파일명")background-repeat : no repeat 등 반복 설정 (x,y가능)background-attachment : scroll, fixed 고정 가능. (스크롤 설정은 안해도 자동 설정되어 있음.)background-size : cover 등 크기 설정.background-position : 위치 결정.background : 축약해서 저 모든 것을 쓸 수 있음. 2017. 2. 22.
레이아웃 : 다단(multi column) 레이아웃 : 다단(multi column) - 생활코딩 column-count : 다단 (4)column-width : 폭 (200px)서로 독립적으로 사용 가능. column-gap : 간격 (20) column-rule-style: solid; column-rule-width: 5px; column-rule-color: red; 핀터레스트 스타일 레이아웃 만들기 편 (보다 실용적인 편) 참고. 2017. 2. 22.
레이아웃 : float 레이아웃 : float (생활코딩) float 이미지를 삽입할 때, 자연스럽게 나타나는 ? 그런 기법. 레이아웃에서도 꽤 사용됨. 여러 단락일 경우, 이미지에 따라서 정렬 처리. float을 활용한 holy grail layout예제 - float_2_holy_grail_layout.html123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 *{ box-sizing:border-box; } .container{ width:540px; border:1px solid gray; margin:auto; } header{ border.. 2017. 2. 22.
레이아웃 : media query 레이아웃 : media query (생활코딩)(위는 화면의 크기가 500px일 때, 배경 색이 빨간색을 뜻함. 그러나 실효성이 없음.) 반응형 디자인의 심장의 역할을 하는 미디어 커리. min-width : 500px 이상 최소 ~~이상max-width : 500px 이하. 최대 ~~ 이하 우선순위의 문제.(캐스케이딩 등 다른 조건이 같다면) 나중에 나오는 코드가 우선순위가 높다. ex : @media(max-width :500px){body{background : color : red;}} @media(max-width :600px){body{background : color : red;}} 즉, 600이하로 나온다. 모바일에서도 601 이상은 빨강, 600이하는 파랑 등 이런식으로 효과가 적용됨. 이.. 2017. 2. 22.
레이아웃 : flex 레이아웃 : flex (생활코딩)flex가 도입된 배경-- Table, Position 등 레이아웃을 더 쉽게 짜기 위한 시행착오들... flex : container (그릇), item(내용물)이 필요. ex) 1 (출처 : 생활코딩) 1 2 3 4 5 item은 contain에 따라 작아지기도 커지기도 한다.item 에게 중요한 속성 3가지. 1. basis : 크기를 지정. 2. grow : flex-grow 에서 item이 컨테이너를 나눠갖는 비율3. shrink : flex-shrink에서 화면이 작아지거나 줄어드는 비율 설정. Holy Grail layout. (유래 : 성배를 찾기 위한 노력 비유...) 생활코딩 html css javascript Lorem ipsum AD 홈페이지 alig.. 2017. 2. 22.
레이아웃 : 포지션 레이아웃 : 포지션 (생활코딩) 각각의 엘리먼트의 위치 엘리먼트를 지정하는 4가지 방법 : relative, static absolute, fixed 1. relative vs static relative : 상태적인 것. 부모 엘리먼트마다 다름. static : 정적인 상태, 기본 상태 포지션 타입이 relative면 그때 offset을 사용할 수 있다. 2. absolute : 절대 포지션, 부모의 위치를 기준으로 해서 offset 값을 지정한다. (자신의 크기는 콘텐츠의 크기로 지정) 3. fixed : 스크롤을 아무리 움직여도 지정된 위치에 고정된다. 부모와 끊기기 때문에 콘텐츠가 자기의 크기가 됨. (2,3) 2017. 2. 19.
레이아웃 : 마진겹침 현상 레이아웃 : 마진겹침 현상 (생활 코딩) CSS가 이해할 수 없는 방식으로 동작해서 깊은 빡침을 느낄 수 있는 경우가 있다. Hello world Hello world 사이에서의 간격이 100이다. 100이 겹쳐지고 있다. 2 부무와 자식 사이의 엘리먼트 요소에서, border 값 같은 시각적 요소가 사라지면, 마진 값이 큰 것이 최종 마진 값을 결정한다. 3. 위, 아래 엘리먼트가 있으면, 2번과 마찬가지로 시각적 요소가 사라지면, 마진이 더 큰 쪽이 최종 마진으로 사용된다. 2017. 2. 19.
레이아웃 : box-sizing (생활코딩) 레이아웃 : box-sizing (생활코딩) 기존의 엘리먼트 크기의 기준은 컨텐츠였다. 그러나, border or padding 값을 넣으면 개발자가 생각한 값과 달랐다. 그 문제 때문에 box-sizing 속성이 나왔는데 box-sizing : border-box;를 하면 그것을 고려하여 크기를 정할 수 있다. 그래서 모든 태그에*{} 적용시킬 수 있다. 2017. 2. 19.
레이아웃 : 박스모델 레이아웃 : 박스모델 (생활코딩) # Box Model은 태그의 바깥쪽에 박스와 같이 부피를 차지한다고 해서 박스모델임. CSS에서 가장 많이 사용되어짐. 박스모델 : 태그의 부피와 태그간의 여백을 설정하는 아주 중요한 것이다.- Padding : 태그와 태그를 감싸는 테두리 사이의 여백. (박스안에 글자와 테두리 사이 값)- Margin : 태그와 태그 사이의 여백. (사각형 사이의 간격) --> inline elemnet : width, height 값 무시. 2017. 2. 19.
레이아웃 : 인라인 vs 블럭레벨 레이아웃 : 인라인 vs 블럭레벨 (생활코딩) HTML 엘리먼트는 크게 2가지로 구분이 된다. 1. 화면 전체를 사용하는 태그 : block elemnet 2. 화면의 일부를 차지하는 태그 : inline level elemnet 그리고 우리가 display라는 속성을 통해서 인라인 방식이나 블럭레벨 방식을 지정할 수 있다. 2017. 2. 19.
도구소개 - brackets 도구소개 - brackets (생활코딩) extract for brackets 기능을 더 이상 지원하지 않음. 쓸려면 Dreamweaver CC를 써야함. - 위치 기능 - 편집 기능 - 미리보기 기능 등 다양한 기능을 볼 수 있는데, HTML과 CSS를 편집하기에는 가장 적절한? 도구이다. 2017. 2. 19.
조화 : 캐스케이딩 조화 : 캐스케이딩 (생활코딩) CSS : Cascading Style Sheet 약자 우선 순위를 어떻게 설정하는가? 기본 규칙 : 웹 브라우저 id > class > 태그선택자 하나의 태그에 여러 디자인이 충첩이 되었을 때, 어떤 것을 우선으로 할 것인가? 뭐가 더 구체적이고 명시적인가, 일반적이고 포괄적인가. 구체적 포괄적스타일 속성 > id 선택자 > 클래스 선택자 > 태그 선택자 결론 : 명시적이고 구체적일수록 우선순위가 높다. --> 다만, !important;를 명시하면, 우선순위가 가장 높아진다. 2017. 2. 19.
조화 : Stylish Stylish (생활코딩) 스타일리쉬는 웹 페이지 디자인을 마음대로 수정할 수 있는 것이다. 다른 사람들이 올려 놓은 디자인을 설치해서 적용하거나 직접 코드를 건드려서 만들 수 있다. Google : style extension --> chorme, firefox 등 설치 2017. 2. 19.
반응형

티스토리툴바