본문 바로가기

Web/HTML과 CSS14

HTML 코드 쉽게 확인할 수 있는 사이트 (with. CSS / JavaScript) HTML에는 브라우저만 있으면 쉽게 결과를 확인할 수 있다. 크롬 Chrome 브라우저에서 개발자 도구 활용이 유용하다. 하기에 설명된 방식을 통해서 Local로도 구축할 수 있지만 사이트에서도 빠르게 편집하면서 결과를 확인할 수 있다. ▶ [HTML] HTML 기본 구조 ▶ [CSS] CSS 선언방법 w3schools ▶ https://www.w3schools.com/ 왼쪽에서 Code를 편집하고 [Run] 버튼을 누르면 오른쪽에 반영된다. liveweave ▶ https://liveweave.com/ Web Page는 크게 HTML & CSS & JavaScript 3가지 적절한 목적으로 사용되는데, liveweave는 이 3가지를 하나의 UI로 반영해 볼 수 있다. 레이아웃 형태와 분할된 창크기도 .. 2021. 7. 4.

[CSS] 상속과 우선순위 CSS를 풀어쓰면 "Cascading Style Sheet" 이다. 'Cascading' 의미는 '위에서 아래로 흐르는'라는 의미로 선택자에 적용된 많은 스타일 중에 어떤 스타일을 적용할 지를 결정하는 것입니다. 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다. 우선순위: 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용됩니다. 상속: 위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. dumy text 1111111111 2222222222 div에만 스타일적용했는데 하위 요소들에게 적용되었다. dumy te.. 2021. 3. 4.

[CSS] 가상 클래스 선택자 Pseudo-Class Selector 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. :link - 방문하지 않은 링크에 스타일 적용 :visited - 방문한 링크에 스타일 적용 :hover - 웹 요소에 마우스 커서를 올려놓을 때 :active - 웹 요소를 활성화 했을 때 :focus - 웹 요소에 초점이 맞추어졌을 때 UI 요소 상태에 따른 가상 클래스 사용자의 동작뿐만 아니라 웹 요소의 상태에 따라 스타일을 지정할 때도 가상 클래스 선택자를 사용 :enabled / :disabled - 요소를 사용할 수 있을 때 / 없을 때 스타일 지정 :checked 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정 2021. 3. 4.

[CSS] CSS 초기화 코드 CSS 초기화 코드 웹 브라우저에는 Default Style이 존재한다. (브라우저가 내장하고 있는 기본 스타일) (웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각.) 불필요한 속성이나 의도하지 않은 값이 적용되는 것을 방지하거나 각 페이지 마다 동일한 형태를 표시하기 위해 Style Sheet에 초기화 코드를 넣는 경우가 존재한다. 한편으로는 웹 브라우저 내장된 스타일 시트를 사용하지 않으므로 서버 요청에 따른 성능 저하가 있을 수 있으며, 사용자는 웹 브라우저를 한 종류만 이용하므로 브라우저간 모양을 힘들게 잡을 필요 없을 수 있다. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend, .. 2021. 3. 4.

[CSS] CSS란 무엇인가? [CSS] CSS란 무엇인가? HTML 웹 문서 뼈대 = 텍스트나 이미지, 표 같은 요소(Element)를 만듦 CSS 웹 문서의 디자인 = 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 내용(Contents)은 건드리지 않은 상태에서 CSS를 통해 디자인만 바꾸어 완전히 다른 느낌의 문서로 만들 수 있다. [동일한] HTML(뼈대, 내용)에 [다른] CSS(디자인) 느낌을 주는 사이트 CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encour.. 2021. 3. 4.

[HTML] Custom 데이터 속성 [HTML] Custom 데이터 속성 HTML 속성에는 ID와 Class가 있습니다. - ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능 - Class 하나의 HTML문서 안에 중복해서 사용 가능 기존의 HTML은 id나 class, name과 같이 규정된 속성을 준수해야 했기에 개발자가 지정된 속성외에 Meta-Data를 제공하기는 어렵다. 그래서 추가된 기능이 커스텀 데이터 속성이다. 커스텀 데이터 속성을 사용하는 div HTML 태그에 『data-』 속성을 추가하여 사용. (tag에 데이터 정보 추가한 것이기에 CSS, JavaScript에서도 활용 가능) [data-type="blog"]{ background-color : yellow; } 이러한 임의로 설정할 수 있기에 기존 설정 변.. 2021. 3. 4.

[HTML] html 태그 사용시 주의사항 태그 vs background-image 속성 - 정보를 가지고 있는 경우 사용 (이미지 변경이 있을 수 있는 내용.) - 고정 이미지의 경우 background-image 처리 (ex. UI 컴포넌트) (회사 Convention이나 개발자 스타일에 따라 기준이 다를 수 있음) 문단을 나누기 위해서 을 사용하지 마라. 줄넘김을 위해 을 사용할 수도 있지만, 문단 구분은 태그를 사용하는 것이 적절하다. (줄 간격은 css margin을 이용해서도 가능.) 태그 안에 alt 속성을 채워넣자. 이미지 로딩이 실패한 경우를 대비하여 대체 텍스트 표시. Inline 요소 태그 안에 Block 요소 태그를 사용하지 말자. [잘못된 예] Block 요소: 줄 바꿈 속성을 가지고 있으며 기본 너비 속성이 100%입니다.. 2021. 3. 4.

[HTML] 시멘틱 태그 (Semantic Tag) HTML 태그는 많은 종류를 가지고 있고 각각의 쓰임새가 존재한다. HTML5 이전에는 html 코드는 문서 내용들을 화면에 보여 주는 역할만 했기 때문에 수많은 태그 위주로 작성되었다. 디자이너 / 개발 담당자는 그러한 문서 구조의 파악이 쉽지 않았으며, 시각 장애인용 화면 낭독기(Screen Reader)나 검색 엔진에서 웹 소스를 읽을 때 구별하기 쉽지 않다. 그래서 HTML5 표준안에서는 '각각의 의미를 지닌다'는 Semantic 태그가 등장하였다. (Semantic Tag는 HTML 데이터 순수성 훼손하지 않는 것.) 태그 단순히 큰 글자를 표시하기 위해 태그를 사용하기 보다는 , , 와 CSS를 통해서도 충분히 글자 크기를 조절할 수 있다. HTML의 순수 데이터의 목적 - 검색 최적.. 2021. 3. 4.

[CSS] CSS 선언방법 CSS를 선택하는 방법은 크게 3가지가 존재한다. : inline / internal / external ※ 어떤 방식으로 선언하든 CSS는 아래 형태로 작성된다. ① span : selector (선택자) ② color : property (속성) ③ red : value (값) 1. inline HTML태그 안에 직접 작성하는 방식이다. 테스트!!!!!!!!!!! * 하나의 웹 문서에서 HTML이 순수한 데이터만을 의미하지 않고, 디자인과 관련된 정보를 가지면 가독성이 떨어질 수 있다. * 다른 CSS 선언 방식보다 높은 우선 순위를 가진다. 2. internal HTML 문서 상단에 안에 정의하는 방식이다. ... 별도의 CSS 파일로 관리하지 않기에 브라우저가 서버에 CSS 파일 요청을 하지 않는.. 2021. 3. 4.

[HTML] 로렘 입숨 (Lorem Ipsum) HTML & CSS 테스트 결과 확인을 위해서 임의의 내용을 채우는 경우가 있다. ex) 레이아웃이 깨지지 않는지 이처럼 의미 없는 내용을 채워주는 것을 '로렘 입숨(Lorem Ipsum)'이라고 합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean s.. 2021. 3. 4.

이전 1 2 다음

티스토리툴바