본문 바로가기

전체 글

 (89)
특강 #2-피그마 웹디자인 1. 색상 (주요 순위 순으로) primary color (메인 색상) secondary color accent color (강조) 60 30 10 rule prmary color 60% / secondary color 30% / accent color 10% 색상 조합 https://coolors.co/?home Coolors - The super fast color palettes generator! Generate or browse beautiful color combinations for your designs. coolors.co 궁극적으로, 피그마를 배워야 하는 이유? 나 빼고 다 할줄 안다. 프로젝트 디자이너의 의도를 파악할 수 있다. (협업 원활) UI 설계가 중요한 이유? 비지니..
특강 #2-웹 접근성 웹 접근성 : 웹 접근성은 장애인을 포함 어떤 사용자들도 웹사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 활용할 수 있도록 하자는 개념이다. >> WAI-ARIA can i use 를 통해 확인하면 꽤 많은 브라우저들이 wai-aria를 지원한다는 것을 알 수 있다. -> jaws(스크린 리더) 와 호환해서 사용하는데, 어떤 브라우저에서 사용하는지에 따라 조금씩 호환성이 다르긴 하다. WAI-ARIA 역할 -트정 요소에 역할을 정의 -역할을 부여하여 사용자에게 정보를 제공 role 속성으로 역할부여 -> 좋은 개발자는 웹 접근성을 고려하고, 이를 구현하기 위해 학습하는 개발자이다. 접근성 좋은 웹사이트를 만들기 위해서는 가이드라인과 기술을 사용해야함
html/css #7-1 동물 소개 페이지 flexbox로 중앙정렬하기 [레이아웃 고민] 1. Flexbox container를 어디에 줘야 하는가? ㄴ Flexbox의 영향을 직접적으로 받지 않는 곳에 줘야 한다. ㄴ 이유 : 1자로 정렬할 것이기 때문에! ㄴ 결론 : body 쪽을 부모로, Flexbox를 주자 [레이아웃 고민2] 2.flexbox를 정 중앙에 위치시켜야한다. 2-1. 동물 이미지의 시.작.점 을 옮겨줘야 한다. ㄴ자식클래스에 justify-content: center; 값을 주면 부모인 body를 기준으로 시작점을 중간으로 옮길 수 있다. 2-2. 동물 이미지를 상하 중간으로 옮겨줘야 한다. 1) 부모인 body의 height를 100vh 로 작성한다. (100% viewport height) 2) 그 후에 align-items: center; 를 통해..
html/css #7-felxbox2 백그라운드에서 이미지 조정하기 background-position: right bottom ; background-origin: content-box; 백그라운드 이미지 스프라이트 ㄴ px 절대값으로도 이동 가능하다. ㄴ이미지의 위치를 기준으로 이동한다. .actions a.view{ background-position: left top; } .actions a.like{ background-position: center top; } .actions a.share{ background-position: right top; } flex-basis 의 크기보다 큰 자식 요소가 있을 때 ㄴ flex basis: 200px; ㄴ 이미지 자식 요소가 이보다 큰 상황이라고 했을 때, 부모의 크기도 함께 늘려버릴 수..
html/css #6-line-height 심화, flexbox inline-block은 텍스트 기준의 base line을 기준으로 정렬되어 있다! 따라서 line-height를 이동하면 개체들이 다 함께 이동하게 된다. vertical-align을 통해 baseline 고정하기 vertical-align: top; value 값은 top, bottom 등을 줄 수 있다. top -> 상단 기준으로 baseline 고정 bottom -> 하단 기준으로 baseline 고정 ex) vertical-line:bottom :아래쪽을 고정 *참고 : 하이픈 규칙 list-items ( '-'하이픈은 자식 요소들의 클래스 이름을 지을 때) list_red ( '_'언더바는 종류, 타입들의 클래스 이름을 지을 때) flexbox 직계부모를 컨트롤하는 컨셉 가로배치하고 싶은 대상..
html/css #5-셀렉터 우선순위, a태그, line-height 부모에 hover 되었을 때 자식요소가 바뀌도록 할 수 있다. div{ } .부모:hover div{ /*부모에 hover되었을 때 변경 요소*/ } object-fit: cover; object-position : center 00px; 셀렉터 우선순위 RED GREEN BLUE ORANGE GRAY ㄴ .red{} 안의 color과 border-color은 우선순위에 의해 적용이 되지 않는다. ㄴ 우선순위가 동일하다면 하단에 적힌 속성이 우선 적용됨 contents 위 코드에서 .wow:hover 안의 코드는 동작하지 않는다. 그 이유는 아래 .wow.wow 코드와 우선순위가 동일하기 떄문, 상위에 있으면 해당 코드가 씹힌다. 다중 클래스 div.box .box .box.wow.wow2 div.box..
html/css #4-프로필 사이트 index 2 (section, 마진병합, 오퍼레이터) div 말고 section 사용하기 ㄴ section에 클래스를 작성한다. *내부 컨텐츠 명으로 클래스명을 작성하면 확장성이 떨어진다. => 템플릿으로 생각해야한다. (컨텐츠는 언제든 변경될 수 있다. ) => 시각적인 요소로 클래스명을 작성해 section 1 section 2 section 영역 확인하기 (box-shadow) box-shadow: inset 0 0 20px blue; inset으로 사용하면, section 내부로 그림자가 배치되기 때문에 공간을 확인할 때 사용할 수 있다. section 마진 병합 현상 마진 병합 현상이 일어나는 조건 1) 블록 레벨끼리만 가능 (인라인-블록X) 2) 상단과 하단만 겹침 현상 나타난다. *section의 상위 셀렉터인 contents의 마진이 늘어나지..
html/css #3-1 마진 병합 현상 css 마진 병합 현상이란, 주어진 마진의 상하단 병합이 일어나는 현상을 말한다. 해당 현상은 의도된 바이며 아래와 같이 이해할 수 있다. Section#1에 margin: 20px Section#2에 margin: 20px 그렇다면 S1과 S2가 만나는 빨간 화살표 부분에서는 총 margin이 40px 이 되어야 맞지만, 자동으로 마진 병합 현상이 일어났다. 마진 병합 현상의 조건 1. 인접해있는 Block 요소 끼리만 일어난다. 2. 상하단만 해당사항이 있다. (좌우측x) 언제나 마진 병합 현상이 이로운 것은 아니며, 곤란한 상황이 일어날 수 있다. 부모에게 padding과 border를 1px 정도씩 줘서 의도적으로 상황을 회피할 수 있다. 부모에게 overflow: hidden;을 주면 해당 현상..

티스토리툴바