분류 전체보기566

• [HTML] 부모 relative, 자식 absolue 사이에, wrapper 태그를 삽입? 부모태그 relative, 자식 태그 absolute 를 지정하였는데, 부모와 자식 사이에 래퍼 태그를 추가해야 할 경우가 있다면, 보무태그와 자식태그의 관계가 깨지지 않도록 래퍼 태그를 추가하는 방법을 알려줘 부모 태그와 자식 태그 사이에 래퍼 태그를 추가하면서, 부모와 자식 태그의 관계가 깨지지 않도록 하는 방법을 알려드리겠습니다.부모 태그에 position: relative 속성을 유지합니다.자식 태그에 position: absolute 속성을 유지합니다.래퍼 태그를 추가할 때, 래퍼 태그에는 특별한 포지셔닝 속성을 주지 않습니다. 기본적으로 position: static 속성이 적용됩니다.다음은 예제 코드입니다:원본 구조 자식 태그 내용 .parent { position: relati.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24.

• [CSS] 2 x 2 이상의 자식을 가진 요소의 flex 레이아웃으로 2 x 2 이상의 자식을 가진 요소의 flex로 할 수 있는 것들을 설명해줘 Flexbox 레이아웃을 사용하여 2개 이상의 자식을 가진 요소를 다양한 방식으로 구성할 수 있습니다. Flexbox는 웹 페이지의 레이아웃을 디자인하는 데 매우 유용하며, 자식 요소들을 정렬하고 공간을 배분하는 데 도움을 줍니다. 다음은 Flexbox를 사용하여 2개 이상의 자식을 가진 요소에서 할 수 있는 몇 가지 주요 작업입니다.1. 주 축 정렬 (Main Axis Alignment)justify-content 속성을 사용하여 주 축(main axis)에서 자식 요소들을 정렬할 수 있습니다.flex-start: 자식 요소들을 주 축의 시작 부분에 정렬합니다.flex-end: 자식 요소들을 주 축의 끝 부분에 정렬합니다.ce.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24.

• [CSS] 웹페이지 스타일링 - 부모와 자식관계 7 웹페이지 스타일은 부모태그와 자식태그와의 관계로 만들어지는 경우가 있는데 어떤 경우가 있는지 알려줘 일립시스라던가 플렉스 포지션 렐러티브와 앱솔루트 등 가능한 많은 케이스를 알려줘 웹페이지 스타일링에서 부모 태그와 자식 태그의 관계는 매우 중요합니다. 여러 스타일링 기법이 부모-자식 관계를 기반으로 작동합니다. 아래에 주요한 몇 가지 예를 들어 설명하겠습니다.1. 플렉스(Flexbox)플렉스 레이아웃을 사용하면 부모 컨테이너가 자식 요소들을 쉽게 배치하고 정렬할 수 있습니다.부모 (컨테이너) 스타일.parent { display: flex; justify-content: center; /* 가로 축에서 중앙 정렬 */ align-items: center; /* 세로 축에서 중앙 정렬 */ .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24.

• [HTML] 모바일 우선, 반응형 페이지 만들기 웹사이트 개발 시 모바일 우선 접근법(mobile-first approach)을 채택하는 것은 매우 좋은 전략입니다. 이 접근법에서는 모바일 환경에서의 사용자 경험을 최우선으로 고려하며, 이후 데스크톱 환경으로 확장해 나갑니다. 모바일 우선 접근법을 사용할 때 GNB(Global Navigation Bar) 구성에 대해 두 가지 방법을 고려할 수 있습니다.방법 1: 모바일 우선 GNB 구성모바일 GNB 먼저 개발:모바일 사용자에게 최적화된 GNB를 설계합니다.최소한의 공간을 사용하며, 직관적이고 간단한 메뉴를 구성합니다.메뉴 아이콘(햄버거 메뉴) 등을 사용해 GNB를 숨기거나 표시합니다.데스크톱 버전 확장:모바일 GNB를 바탕으로 데스크톱 GNB로 확장합니다.더 큰 화면 공간을 활용하여 메뉴를 더 넓게 .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24.

• 

  [웹폰트] NotoSans 에서 Pretendard 사용 방법 웹폰트 woff2, woff 등을 만들기 위해서는 일반 ttf 또는 otf 폰트를 다운받고,이를 변환해주는 곳에서 변환해주면됩니다. 두가지 폰트 살펴봅니다.NotoSans KR (본고딕, 노토산스)  vs Pretendard (프리텐다드) 1. NotoSans KR 다운로드https://fonts.google.com/noto/specimen/Noto+Sans+KR 2. Pretendard 다운로드https://github.com/orioncactus/pretendard 3. 웹폰트로 변환하기https://transfonter.org/ 4. NotoSans 폰트 스타일 예제/* Noto Sans KR 폰트 호출 */@charset "UTF-8";@font-face { font-family: 'Noto S.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24.

• [CSS] em, ex, small, smaller 기준 1. em과 ex의 사이즈 계산 기준em:em은 요소의 폰트 사이즈를 기준으로 상대적인 크기를 나타냅니다. 예를 들어, 부모 요소의 폰트 사이즈가 16px일 때, 자식 요소에서 1em은 16px, 2em은 32px이 됩니다.em은 상속됩니다. 즉, 부모 요소의 폰트 사이즈를 기준으로 자식 요소에서 em의 크기가 결정됩니다.ex:ex는 소문자 x의 높이를 기준으로 한 상대적인 크기입니다. 폰트의 x-height는 폰트에 따라 다르며, 일반적으로 폰트의 크기의 약 절반 정도가 됩니다. 하지만 폰트에 따라 다를 수 있기 때문에 폰트마다 ex의 실제 크기가 다를 수 있습니다.2. em 또는 ex의 기준이 되는 사이즈 변경 방법CSS를 사용한 변경:em과 ex의 기준은 폰트 사이즈에 따라 달라지므로, 폰트 사이즈.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 23.

• [CSS] Flexbox와 Grid 정렬 속성 비교 align-, justify-, -items, -content lexbox와 Grid 레이아웃에서 사용하는 align-items, align-content, justify-items, justify-content 속성은 컨테이너 내의 아이템을 배치하는 데 중요한 역할을 합니다. 각각의 차이점을 아래에 설명하겠습니다.Flexbox에서 사용하는 속성들1. align-items설명: Flex 컨테이너 내의 아이템들을 교차 축(cross axis) 방향으로 정렬합니다. Flex 컨테이너의 flex-direction 속성에 따라 교차 축은 달라집니다.값:flex-start: 아이템들을 교차 축의 시작 지점에 정렬합니다.flex-end: 아이템들을 교차 축의 끝 지점에 정렬합니다.center: 아이템들을 교차 축의 중앙에 정렬합니다.stretch: 아이템들을 컨테이너의 높이에.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 22.

• 이력과 경력의 차이 이력과 경력은 종종 혼용되지만, 의미와 사용 상황에서 차이가 있습니다. 다음은 두 개념의 차이점과 예시다 이력 (履歷, Resume)이력은 개인의 학력, 경력, 자격증 등 주요 사항을 간략하게 정리한 문서입니다. 주로 구직 활동을 위해 작성하며, 구체적인 업무 경험보다는 요약된 정보가 담겨 있습니다. 이력의 예시:이력서: 1. 학력: - 2010년 3월 ~ 2014년 2월: 서울대학교 경제학부 졸업 2. 경력: - 2014년 3월 ~ 2017년 2월: 삼성전자 마케팅팀 사원 - 2017년 3월 ~ 2020년 2월: LG전자 해외영업팀 대리 3. 자격증: - 2013년 5월: 토익 900점 - 2016년 10월: PMP(Project Management Professional) 자격증 4. 수상 경력: -.. 생활정보 2024. 7. 19.

• [JAVASCRIPT] 파일 include 방법 jQuery를 사용하는 방법 id="footer" 인 곳에 /common/layouts/footer.html 파일 삽입하기 코딩ㆍ개발 정보/HTML 연습 2024. 7. 18.

• [MSSQL] 특정 구간 날짜, 시간 구하기 쿼리 CONVERT와 VARCHAR를 사용한 날짜와 시간 구간 처리WHERE 1 = 1 AND CONVERT(VARCHAR(10), regDate, 121) BETWEEN '2013-05-06' AND '2013-05-09' AND ( (CONVERT(VARCHAR(8), regDate, 108) BETWEEN '18:00:00' AND '23:59:59') OR (CONVERT(VARCHAR(8), regDate, 108) BETWEEN '00:00:00' AND '09:00:00') ) CONVERT와 VARCHAR를 사용하여 더 복잡한 시간 구간 처리WHERE 1 = 1 AND ( (CONVERT(VARCHAR(10), regDate, 121) = '2013-05-06'.. 코딩ㆍ개발 정보/데이터베이스 연습 2024. 7. 18.