css 4

[신한투자증권 프로디지털 아카데미] 실무형 웹페이지 실습(1) - 포트폴리오 만들기

오늘은 그동안 배운 HTML과 CSS 내용을 정리하며, 직접 나만의 포트폴리오를 제작해보는 시간을 가졌다. 다양한 개발자들의 포트폴리오를 참고하면서 각 구성 요소의 장단점을 비교해보고, 내가 추구하고자 하는 방향에 대해 고민해볼 수 있었다. 그 과정에서 단순히 시각적으로 화려한 UI보다는, 나라는 사람에 대해 명확히 보여줄 수 있는 포트폴리오를 만드는 것이 더 중요하다고 느꼈다. 포트폴리오는 결국 자신을 드러내는 도구인 만큼, 내가 어떤 역량을 중요하게 생각하는지, 그리고 프로젝트에 어떤 자세로 임해왔는지를 중심으로 진정성 있게 구성하고자 했다. "왜 지원자님을 채용해야 하나요?" 라는 질문에 답하기 위해서는, 내가 왜 이 직무에 적합한 인재인지, 어떤 경험과 성과로 그 역량을 증명할 수 있는지를 구체..

[신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(3) (HTML/CSS)

1. 디자인 시스템 1) 왜 중요한가?: 생산성이 엄청 올라감UI 일관성 유지 : 팀마다 스타일이 달라지는 걸 방지 (디자인 브랜딩 유지)개발 생산성 향상: 이미 만든 컴포넌트를 재사용 → 반복 코드 줄어듦협업 강화 : 디자이너 개발자 간 커뮤니케이션 효율 ↑빠른 확장성 : 디자인이 바뀌어도 핵심 토큰만 바꾸면 전체에 반영 가능 cf. 컬러 토큰을 만들어주면 좋다 2. CSS 가상속성: 선택자에 : 또는 ::를 붙여 사용하며, 시각적 효과나 인터랙션을 표현할 수 있게 해준다 1) 가상 클래스(Pseudo-class)란?: HTML 요소가 가진 특정 상태를 선택하는 기능, 상태 기반 스타일링을 할 수 있다가상 클래스설명:hover마우스를 요소 위에 올렸을 때 동작:active요소가 클릭되어 활성화된 순..

[신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(2) (HTML/CSS)

1. CSS로 스타일링하기 1) CSS 소개: 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어: 요즘은 가독성과 레이아웃에 중점을 많이 둠 2) CSS 의 기본 구문h1 { // 선택자 color: blue; // 속성: 값}선택자(Selector)- 꾸미고 싶은 HTML 요소를 선택한다속성(Property) - 꾸미고 싶은 속성명을 입력한다값(Value) - 어떻게 꾸밀지 속성값을 입력한다 3) CSS를 HTML에 적용하는 방법: HTML와 CSS는 다른 언어이기 때문에, HTML 파일에서 css를 적용하는 코드를 작성해야 한다.인라인 스타일 : HTML 요소의 style 속성을 사용하여 해당 요소에 직접 CSS 스타일을 지정제목 내부 스타일 시트 : HTML 문서 내부에서 ..

[신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(1) (HTML/CSS)

1. 웹 구성요소 알기 1) 웹이란 : 전 세계가 연결된 정보의 공간 : 우리는 웹을 통해 문서, 이미지, 비디오, 애플리케이션 등의 다양한 콘텐츠에 쉽게 접근하고 공유할 수 있다: 하이퍼링크를 통해 문서 간 이동이 가능하며, 이로 인해 웹은 거대한 연결 구조(Navigation Network)를 형성한다 2) 웹을 만드는 3가지 언어HTML (HyperText Markup Language) 웹 페이지의 구조를 정의하는 마크업 언어 - 사용자뿐 아니라 검색 엔진이 콘텐츠를 이해하고 인덱싱하는 데도 도움이 된다 웹 페이지에 있는 모든 콘텐츠는 HTML을 통해 구성됨 - 이는 상호 연결을 가능하게 함(하이퍼링크) 를 사용하여 각 요소의 구조와 역할을 구분 CSS (Cascading Style Sheets)웹..