이미지와 글의 줄 맞추기

vertical-align: middle; 꼭 img 태그에 스타일 줘야함 vertical-align: middle;

• format_list_bulleted HTML, CSS
• · 2023. 9. 4.
• textsms

HTML 자주 쓰는 코드

img src : 이미지의 경로 width : 이미지의 가로 사이즈 height : 이미지의 세로 사이즈 a href : 링크 input : 검색창 (설명: https://htmlreference.io/element/input/) input - HTML Reference Learn how input works in HTML. htmlreference.io div : 영역을 나눔 p : 문단을 나눔 button : 버튼 span : 그룹을 나누는데 다음줄로 넘어가는 div와 다르게 한 줄에서 그룹을 나눌 수 있음.

• format_list_bulleted HTML, CSS
• · 2023. 9. 2.
• textsms

CSS 연습

1. 첫번째 미션 Box 1 Box 2 Box 3 이 HTML코드를 이용해 이런 결과물을 만들어보자! 우선 어려움이 있어서 결국 선생님이 올려주신 정답을 보고야 말았는데 -HTML- Box 1 Box 2 Box 3 여기서 Box 2의 코드인 class="box green" 은 CSS에서 .box green 을 줘도 적용이 안되었다. 일단 정답은 '.green' 으로 적어야 됐는데 잘은 모르겠지만 위에서 먼저 '.box'를 적었으니 "box" 가 들어간건 먼저 적은 코드의 값들이 적용되는게 아닌가 싶다. (아닐 수 있음)일단 정답 공개! -CSS .box { border: 50px solid red; width: 200px; padding: 50px; margin-bottom : 20px; } .green..

• format_list_bulleted HTML, CSS
• · 2023. 9. 1.
• textsms

CSS를 이용해 스타일 주는 방법, 자주 사용하는 스타일

CSS에서 자주 사용하는 스타일! (계속 업데이트 할 예정) color : 텍스트 색상 변경 background-color : 배경색 변경 border : 테두리 (두께 스타일 색상) width / height : 넓이 / 높이 지정 text-align : 정렬 (left, center, right) margin : 영역 밖 공간 (top, left, right, bottom) padding : 영역 안 공간 (top, left, right, bottom) font-size : 글자 사이즈 변경 font-family : 글씨체 변경 font-weight : 글자 굵기 조절 padding-left text-indent : padding은 개체 전체가 이동하고 text-indent는 첫부분만 들여쓰기가 되는..

• format_list_bulleted HTML, CSS
• · 2023. 8. 31.
• textsms

UX/UI 국비지원 강의 - 4

디자인 씽킹(Design Thinking) : 비즈니스 전략에 대한 요구를 충족시키기 위해 디자이너의 감수성과 작업방식을 이용하는 사고 방식 Design Thinking 을 위한 6가지 단계 공감(사용자를 이해하기 위해 리서치) -> 문제정의(리서치 결과와 사용자가 가진 문제를 연결) ex) 어린이 전용 MRI 기계를 어린이들이 무서워함. 아이디어(문제 해결을 위한 창의적 아이디어 도출) -> 프로토타입(아이디어를 눈으로 볼 수 있고 만질 수 있게 표현 ex) MRI 기계를 로봇이나 잠수함처럼 아이들이 좋아할만한 소재로 스케치함. 해적선처럼 MRI기계를 만들어봄 검증(사용자로부터 다시 피드백 얻기) -> 실행(목표를 달성하기 위해 실행) ex) 어린이들이 겁내하지 않은지 확인.

• format_list_bulleted Figma
• · 2023. 8. 30.
• textsms

UX/UI 국비지원 강의 - 3

UX(사용자 경험) - CX(고객경험) - BX(브랜드 경험) 1. CX (Customer Experience, 고객 경험)란? -> 디지털 상호작용에 있어 전체적인 경험을 설명하기 위해 제안된 UX와 달리, CX는 더 넓은 의미의 총체적 경험을 설명하기 위해 사용 2. BX (Brand Experience, 브랜드 경험)란? -> 기업이 특정 제품이나 회사 이름에 대해 고객이 느끼는 감정에 영향을 주기 위해 만든 종합적이고 체험적인 마케팅의 일종 - 프로덕트 디자이너라 불리는 이유? -> 'ux 디자이너' 처럼 ux만을 하는 것처럼 말하는 것이 아닌 BX, CX 등 여러가지를 함께 할 수 있는, 제품(Product) 전체의 경험을 디자인해야한다는 관점에서 호칭부터 바꾼 것이다. 느낀점 -> 초반에 이론..

• format_list_bulleted Figma
• · 2023. 8. 30.
• textsms