본문 바로가기

CSS10

Jinja2 템플릿 언어 동작원리 이해와 간단한 웹 화면 구성 우선 Jinja2에 대해 간단하게 설명하겠습니다. 1. Jinja2는 무엇인가요? Jinja2는 Python에서 사용되는 템플릿 엔진 중 하나입니다. 템플릿 엔진은 정적인 부분과 동적인 데이터를 결합하여 동적인 결과물을 생성하는 도구입니다. 2. 어떤 역할을 하는 건가요? Jinja2의 주된 역할은 HTML과 같은 문서를 만들 때, 문서의 일부를 동적으로 변환하는 데 있습니다. 정적인 부분은 그대로 두고, 특정 부분을 변경하거나 반복되는 패턴을 생성할 수 있도록 도와줍니다. 3. 어떻게 동작하나요? Jinja2는 템플릿 안에 삽입된 특별한 문법을 해석하여 동적인 부분을 채워넣습니다. 중괄호({{ }}) 안에 변수를 넣으면 해당 변수의 값으로 치환되고, 중괄호와 퍼센트({% %}) 사이에는 제어 구조(반복.. 2023. 12. 19.
<jQuery> 선택자와 스타일(CSS) .css() .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다. 문법 1 .css( propertyName ) 속성값을 가져옵니다. 예를 들어 $( "h1" ).css( "color" ); 는 h1 요소의 스타일 중 color 속성의 값을 가져옵니다. 문법 2 .css( propertyName, value ) style 속성을 추가합니다. 예를 들어 $( "h1" ).css( "color", "green" ); 는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 바꿉니다. ... .grand { width: 400px; height: 400px; background-color: deepskyblue; } .parent { width: 300px; height: .. 2021. 4. 27.
[html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-align 속성을 씁니다. text-align은 block 요소 안에 있는 inline 요소를 정렬합니다. inline 과 block 요소 차이는 다음을 참고 inline 요소 : 줄 속에 끼워 넣는 요소로 예 :, , , 태그 등 block 요소 : 해당 요소가 속한 줄은 가로 화면 전체100%를 차지하며 앞뒤로 줄 바꿈이 됨 예 : , , , , 등 1. block 요소에만 text-align 속성을 적용할 수 있다 2. 정렬되는 것은 block 요소 안에 있는 inline 요소만 가.. 2021. 4. 14.
웹 색상표, HTML 컬러 코드표 웹 사이트를 만들 때, 여러 방법으로 색을 지정할 수 있다. 십육진법 표기 웹에서 십육진수쌍으로 색을 표현하는 방법은 RGB 가산혼합에 의한 것이다. 적(red), 녹(green), 청(blue)에 해당하는 두 자리 십육진수 세 쌍으로 색깔을 나타낼 수 있다. 한 채널에 1바이트가 할당되므로 모두 3바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 #과 3쌍의 두자리 십육진수를 연속하여 사용한다. 표기형식 특수기호 Red 채널 Green 채널 Blue 채널 # 00~FF 00~FF 00~FF 표기 예 표기 색상 #000000 #ff0000 #00ff00 #0000ff 표현 범위 두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. 즉, 하나의 채널.. 2021. 2. 7.
CSS로 특정 브라우저를 선택하는 방법 반응형 웹을 만들다보면 다양한 OS와 브라우저에 따라 표시되는 모습이 달라질 수 있어서 특정 OS나 브라우저를 CSS로 선택할 수 있는 방법을 정리합니다. 다양한 OS와 브라우저에 적합하게 일반적인 CSS 속성만으로는 다소 어려움이 있다. 선택자와 가상선택자 CSS로 특정 요소를 선택하는 방법 CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. blog.pages.kr CSS로 특정 요소를 선택하는 방법 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다. blog.pages.kr 브라우저 선택자 (CS.. 2021. 1. 21.