본문 바로가기

전체 글400

[정보처리기사] HTML5의 시멘틱 구조 / CSS 란? ✨ HTML5의 시멘틱 구조 1) Header : 헤더 영역을 지정하고 주로 로고나 회사명, 사이트 맵 위치 2) Navigation : 본문의 주요 네비게이션(메인 메뉴) 영역을 지정 3) Section : 해당 페이지의 콘텐츠 영역을 지정할 때 사용 4) Article : 독립적인 콘텐츠 항목에 대한 영역을 지정할 때 사용 5) Aside : 본문 내용 이외에 표현하고자 하는 기타 내용이 있을 경우에 영역을 지정할 때 or 서브 메뉴 6) Footer : 본문 내용의 아래에 위치하며 주로 개인정보 보호 정책, 회사 주소 등을 작성 ✨ CSS DFDSFDDFDFFDF 1) 정의 : 웹 페이지 전체의 일관성을 유지할 수 있도록 스타일(색상, 글꼴, 크기 등)을 미리 저장해 둔 시트를 의미 2) 특징 - .. 2022. 9. 20.
[정보처리기사] UI / UX 설계 | UI, UX란 ? ✨ UI / UX 설계 > UI(User Interface) 사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을 높여주기 위한 기술 > UX(User Experience) UI와 비슷하지만 사용자들의 특성을 객관적 자료 및 통계를 바탕으로 면밀하게 분석하여 사용자의 불편함을 최소화하기 위해 만든 기술 > 인터페이스 종류 * CLI(Command Line Interface) 사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 텍스트 형태로 표현 * GUI(Graphical User Interface) 사용자가 컴퓨터의 자원을 사용할 수 있도록 구성요소들이 그래픽 형태로 표현 * NUI(자연어 유저 인터페이스) 사용자의 몸짓, 말소리만으로 IT 기기를 사용할 수 있는 기술 > U.. 2022. 9. 19.
[정보처리기사] 절차지향 & 객체지향 프로그래밍 1) 절차지향 프로그래밍 - 객체라는 개념이 등장하기 이전에 모듈, 변수, 함수를 사용하여 개발 - 프로그램을 순차적으로 수해시키는 방법 - 자료구조와 명령 중심으로 프로그램을 구성 2) 객체지향 프로그래밍 - 객체와 객체 간의 통신을 통해 프로그램이 구현됨 * 객체지향 프로그래밍의 구성요소 3가지 1. 객체 - 개체, 속성, 메소드로 구성된 클래스의 인스턴스를 의미 - 개체 : 현실 세계에 보이는 본질 - 속성 : 자료 저장소 역할, 절차지향에서는 변수와 대응 - 메소드 : 호출단위 의미, 절차지향 프로그래밍 함수와 대응 2. 클래스 - 객체의 타입을 정의하고 객체를 생성하는 틀 3. 메시지 - 객체 간의 통신을 의미 2022. 9. 18.
[정보처리기사] 프로그래밍 언어의 유형 분류 개발 편의성에 따라 저급언어와 고급언어로 분류된다. 저급 언어 기계가 이해할 수 있도록 만들어진 기계어 고급 언어 개발자가 소스코드를 만들때 쉽게 이해할 수 있도록 작성된 언어 명령형 언어/절차형 언어 명령어들이 순차적으로 실행되는 프로그래밍 언어(FORTRAN,COBAL,PASCAL,C) 함수형 언어 수학적 수식과 같은 함수들로 프로그래밍을 구성해 호출 논리형 언어 규칙에 대한 활성화 조건이 만족되면 연관된 규칙이 실행 객체지향 언어 객체 간의 메시지 통신을 이용해 프로그래밍(JAVA, C++) 컴파일 언어 고급언어->기계어로 번역, 실행 속도가 높은 장점 인터프리터 언어 고급언어 명령문을 하나씩 번역하고 실행하는 방식의 언어, 프로그램 실행시 계산 혼합형 언어 고급어를 컴파일하여 중간 언어로 변환한 .. 2022. 9. 17.
[예제 따라하기] 이력서 양식보고 HTML/CSS만을 이용하여 만들기 과외 수업하면서, 선생님이 주신 양식 그대로 이력서 만들기 ! 완전 똑같이 넓이, 높이, 폰트 사이즈까지 따라하며 맞추다보니 자동으로 css 적용하는 기술이 느는 것 같다. 특히, table 로 칸들의 넓이, 높이를 조절해야만 했는데 div 조절처럼 쉽게 되는 게 아니라(전체적으로 흔들려서) 어려웠지만, 가운데 td를 조절하면 위의 td까지 조절되는 것을 발견하여 그렇게 높이 조절을 했다. 아래는 css내용 이건 body내용 사 진 이 력 서 성 명 인 생 년 월 일 년 월 일생 (만 세) 주 소 주소 내용 전 화 번 호 (휴대전화) 가 족 관 계 관계 성명 연령 현재직업 년 월 일 학 력 및 경 력 사 항 기관 및 장소 위의 기재한 내용은 사실과 다름이 없습니다. 20 년 월 일 작성자 (인) 1. 처.. 2022. 9. 16.
[CSS] ellipsis 기능 / 넘치는 문장 말줄임으로 표시하기 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 생긴다. 말줄임표를 사용하면 해당 문장이 사실은 더 긴 문장이고 생략되었다라는 것을 암시해주는 역할을 할 수 있다. 👨‍🦰 white-space 원래 설정된 디폴트는 width를 넘어갈 경우 줄바꿈이 자동으로 되는데 white-space가 이 줄바꿈을 설정해주는 거다. white-space:normal;로 할 경우 일반적인 줄바꿈이 되고 white-space:nowrap;으로 하면 줄넘김이 되지 않음 👨‍🦰 text-overflow 텍스트가 넘치는 부분을 어떻게 처리할 지 관여하는 기능 white-space:nowrap; 👉 줄넘김 하지 마세용 overflow:hidden; 👉 설정한 div 넓이보다 길어지면 안 보이게 하세용 text-overf.. 2022. 9. 15.

티스토리툴바