새로비

반응형

Language & Solution (66)

아파치 카프카(Apache Kafka) 아키텍처 및 동작 방식

Language & Solution/Kafka 새로비 2022. 3. 23. 13:53

| 아파치 카프카(Apache Kafka)란? 아파치 카프카(Apache Kafka)는 분산 스트리밍 플랫폼이며 데이터 파이프 라인을 만들 때 주로 사용되는 오픈소스 솔루션입니다. 카프카는 대용량의 실시간 로그처리에 특화되어 있는 솔루션이며 데이터를 유실없이 안전하게 전달하는 것이 주목적인 메세지 시스템에서 Fault-Tolerant한 안정적인 아키텍처와 빠른 퍼포먼스로 데이터를 처리할 수 있습니다. 아파치 카프카는 현재 2.x 버전까지 나와있고 초기에 Producer, Consumer 기능에서 0.10.x 버전에서부터 Connectors와 Stream Processors가 추가되었습니다. 이 포스팅에서는 Producer, Consumer에 대해서만 다룰 것이며 카프카가 어떤 아키텍처로 구성되어 있고 어..

더 읽기

[HTML&CSS] column 속성으로 다단으로 편집 (multi-layout edit)

Language & Solution/HTML&CSS 새로비 2019. 10. 22. 18:23

column 속성으로 다단으로 편집 텍스트 단을 column 속성으로 다단으로 편집할 수 있습니다. 다단으로 편집한다는 의미는 어떤 레이아웃을 여러 개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다. 보통 다단으로 편집하려면 table 요소를 사용하여 구성하기도 하지만 css의 column 속성으로 간편하게 구현할 수 있습니다. column-width column-width를 통해 column으로 표현되는 단의 너비를 고정해 놓고 구성할 수 있습니다. column 즉, 단을 고정시켜 놓았을 경우 화면이 커지면 단의 개수가 많아질 것이고 화면이 작아지면 단의 개수가 줄어드는 원리입니다. column-width: | auto 단 너비를 직접 지정할 수 있습니다. auto 단의 개수 같은 다른 속성에 따라 단 ..

더 읽기

[오라클 DB] 오라클 테이블 생성하기

Language & Solution/RDBMS 새로비 2019. 10. 15. 10:13

오라클 테이블 생성 테이블은 DBMS에서 가장 기본적인 객체로 로우(행), 컬럼(열)로 구성된 2차원 형태의 객체로 엑셀의 워크시트의 구조와 유사합니다. SQL을 이용해 데이터를 조회, 삭제, 입력, 수정할 수 있으며 그 결과로 생성되거나 삭제된 데이터가 반영되는 곳이 테이블입니다. 테이블은 DBMS에서 가장 필수적인 요소입니다. 따라서 테이블의 논리적, 물리적 구조를 제대로 알아야 나중에 DBMS를 운영할 때 효율적이고 안전하게 운영할 수 있습니다. 테이블 생성 구문 테이블은 CREATE 문으로 생성할 수 있습니다. CREATE 구문에는 정말 많은 옵션이 있지만 그 중 핵심적인 것만 적어보면 아래와 같습니다 CREATE TABLE [SCHEMA.] 테이블명 ( 컬럼1 데이터타입 [DEFAULT 표현식]..

더 읽기

[MariaDB] MariaDB 다운로드 및 설치 - windows, ubuntu

Language & Solution/RDBMS 새로비 2019. 10. 13. 19:55

■ MariaDB 다운로드 MairaDB 설치 프로그램은 여기 MariaDB 사이트에서 다운로드 받을 수 있습니다. 다운로드 페이지에 가면 현재 다음과 같은 페이지 창이 나타납니다. 아래 최신 stable 버전을 클릭합니다. (현재 10.4) 만약 최신 버전이 아닌 그 이전 버전의 MariaDB 서버를 내려받으려면 우측 "View All MariaDB"를 클릭하면 됩니다. 이 버튼을 클릭하면 메인 버전의 예전 release 버전을 목록으로 표시해줍니다. ■ windows windows 운영체제의 비트 버전에 맞게 해당 다운로드 패키지를 클릭합니다. 참고로 winx32는 32비트 운영체제, winx64는 64비트 운영체제입니다. 여기서는 msi 패키지를 다운로드 쉽게 설치를 진행하는 방법을 알아보겠습니다...

더 읽기

[MariaDB] MariaDB란 무엇일까? MariaDB 소개 (MariaDB Overview)

Language & Solution/RDBMS 새로비 2019. 10. 13. 19:30

■ MariaDB란? MariaDB는 MariaDB사가 제작한 오픈소스 RDMBS 소프트웨어입니다. MariaDB가 무엇인지 알기위해서는 MySQL이란 유명 RDBMS를 알아야합니다. 왜냐하면 MySQL에서 떨어져나온 RDBMS가 MariaDB이기 때문이죠. MySQL은 AB사에서 제작했던 소프트웨어 입니다. 썬 마이크로시스템스에서 당시 10억 달러, 우리나라 돈 1조 가량에 인수했다가 양복기업의 대표주자 오라클이 썬 마이크로 시스템스를 2010년에 72억 달러 8조 ㅎㄷㄷ 에 인수해가면서 오라클 것이 되었죠. 오라클은 MySQL을 인수하면서 상업적으로 MySQL을 이용할 시 사용료를 내도록 정책을 바꾸어 버렸습니다ㅠㅠ 그러나 오라클의 정책에 반발한 AB사에서 핵심 창업자중 한 명이었던 몬티 와이드니어스..

더 읽기

[HTML&CSS] position 속성 정리하기!

Language & Solution/HTML&CSS 새로비 2019. 10. 10. 14:18

*아래를 누르시면 HTML, CSS 코드 실행환경을 만드실 수 있습니다.[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 position 속성 position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있죠. 티스토리를 하다보면 css를 수정해야하는 일이 잦습니다. 만약 position 속성에 대한 이해없이 css를 수정한다면 예상치도 못하게 블로그 레이아웃이 이상해지거나 망가질 수 있습니다( Wordpress나 서비스 UI, 프론트엔드쪽 만질 때도 마찬가지!). 딴 건 몰라도 화면단과 관련된..

더 읽기

[HTML&CSS] box-sizing, float, clear

Language & Solution/HTML&CSS 새로비 2019. 10. 8. 17:55

| box-sizing box-sizing 속성은 width의 크기를 어떤 기준으로 할 것인지를 정하는 속성입니다. 박스 모델에서 width의 값을 토대로 콘텐츠 영역의 크기를 결정하는 것이죠. 처음 감을 잘 못잡을 수도 있지만 천천히 포스팅을 따라오다보면 쉽게 이해할 것입니다! box-sizing에서 사용할 수있는 값은 다음과 같습니다. box-sizing : content-box | border-box content-box width 속성값을 콘텐츠 영역 너비 값으로 사용합니다. (기본값) border-box width 속성값을 콘텐츠 영역 및 테두리(border)까지 포함한 박스 모델 전체 너비 값으로 사용합니다. 참고로 content-box보다는 border-box가 width를 통해 콘텐츠 영역..

더 읽기

[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성

Language & Solution/HTML&CSS 새로비 2019. 10. 8. 16:50

*아래 링크를 누르시면 HTML, CSS 코드 실행환경을 만들 수 있습니다.[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 마진(margin) 마진(margin)은 요소 주변 여백을 뜻합니다. 마진의 크기를 조절함으로서 다른 요소 사이에 간격을 남겨 유저 친화적인 UI를 구사할 수 있죠. 마진 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 이름에서 알 수 있듯 위, 오른쪽, 아래쪽, 왼쪽 여백들을 가리키는 속성들이며 이를 한 번에 표기할 수 있는 margin이란 속성도 있습니다. 사용법은 다음과 같습니다. margin : | | auto margin-top ..

더 읽기

[HTML&CSS] 콘텐츠(content) 영역

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 21:38

| 콘텐츠 영역 콘텐츠 영역(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로 텍스트, 이미지, 비디오 등 실제 내용을 포함하는 부분입니다. 콘텐츠 영역의 크기는 콘텐츠 너비 및 콘텐츠 높이로 결정되며 width와 height 속성으로 설정할 수 있습니다. width: | | autoheight: | | auto : px이나 cm 같은 단위로 지정합니다. : 박스모델을 포함하는 부모 요소 기준으로 너비나 높이값을 백분율로 지정합니다. (부모가 없을 때는 viewport 기준)auto : 박스모델의 크기가 콘텐츠 양에 따라 자동으로 결정됩니다. (기본값) 참고로 CSS 박스 모델의 width 속성은 콘텐츠 영역의 너비를 말합니다. 이때 콘텐츠 영역를 계산하는 방식은 어떤 bo..

더 읽기

[HTML&CSS] 테두리(border) 영역

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 15:13

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다. [Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 테두리(border) 영역 박스 모델(box model)에서 테두리는 텍스트 단락 뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. | border-style : 테두리 스타일 border-style은 테두리의 스타일을 정하는 속성으로 쓰이며 다음과 같은 값을 지정할 수 있습니다. none 테두리가 나타나지 않습니다. (기본값) hidden 테두리가 나..

더 읽기

[HTML&CSS] 박스모델 (Box Model)

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 10:51

| 박스모델 (box model) CSS에서는 각 요소를 박스 형태로 나타내며 이를 박스모델(Box Model)이라 합니다. 문서의 레이아웃을 계산할 때, 브라우저는 CSS 기본 박스 모델에 따라 각 요소를 사각형 박스로 표현합니다. 하나의 박스는 아래와 같이 네 부분으로 이루어집니다. 마진(Margin) : 바깥 여백을 나타냅니다.테두리(Border): 마진과 패딩 사이의 테두리 영역을 나타냅니다.패딩(Padding): 안쪽 여백 영역을 나타냅니다.콘텐츠(Content): 실제 텍스트나, 이미지가 들어가는 영역입니다. | 박스모델(box model) 확인하는 방법 박스모델은 각 브라우저에서 개발자도구창에서 쉽게 확인할 수 있습니다. 크롬을 기준으로 F12를 누르면 개발자 도구창이 나오며 Elements..

더 읽기

[HTML&CSS] CSS 스타일 우선순위

Language & Solution/HTML&CSS 새로비 2019. 10. 2. 18:22

| CSS 스타일 우선순위 (CSS Style Precedence) CSS의 C는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻입니다. 이러한 방식으로 CSS는 중복되는 스타일 규칙을 '위에서 아래로' 적용되며 방지하는 방법을 채택하고 있습니다. 즉 스타일에 우선순위를 두어서 HTML의 요소가 어떤 CSS 스타일에 영향을 받을 지 결정하는 것이죠. 스타일의 우선순위는 다음과 같이 먼저 사용자와 제작자 그리고 중요 스타일인지 일반 스타일인지에 따라서 결정됩니다. (1이 가장 중요한 순서, 5가 가장 낮음) 1. 사용자 스타일 시트, 중요 2. 제작자 스타일 시트, 중요 3. 제작자 스타일 시트, 일반 4. 사용자 스타일 시트 일반 5. 브라우저 스타일 시트 여기서 사용..

더 읽기

[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)

Language & Solution/HTML&CSS 새로비 2019. 10. 2. 16:24

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다. [Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element) 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다. 블록 레벨은 다음과 같은 특징이 있습니다. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진..

더 읽기

[Oracle DB] Oracle 저장구조 정리(블럭, PCTFREE, PCTUSED)

Language & Solution/RDBMS 새로비 2019. 9. 27. 15:14

| 오라클 블럭(Oracle Block) 회사에서 쓰는 레거시 DDL문을 분석해 보니 PCTFREE, PCTUSED가 나와서 이를 정리한 포스팅입니다. 무려 9i이후부터 세그먼트를 자동적으로 관리하는 ASSM(Automatic Segment Space Management)가 나와 SEGMENT SPACE MANAGEMENT AUTO 절을 넣어 자동으로 관리하고 있습니다. 이렇게 수동으로 관리하는 것을 보기 어렵게 되었다고 알고있는데 어쩌겠습니까? 월급쟁이의 설움 ㅠㅠ 돈 받고 일하려면 어쩔 수 없이 해야죠. (회사를 까는 거는 아닙니다 ㅎㅎ;) 오라클에서의 I/O는 블럭단위로 이루어집니다. 오라클 블럭은 OS의 블럭 한 개 이상을 합쳐 만들며 DB_BLOCK_SIZE로 지정하게 됩니다(기본 오라클 DB ..

더 읽기

[자바 프로그래밍] 자바 this를 파헤쳐보자

Language & Solution/Java 새로비 2019. 6. 10. 23:32

자바에서 제공하는 this 키워드는 인스턴스 자기 자신를 가리키는 키워드입니다. 이 this 키워드를 통해 클래스 메서드 및 생성자에서 자기 자신의 데이터를 업데이트하거나 조작할 수 있습니다. 여기서 중요한 것은 this 키워드는 이 클래스를 기반으로 생성된 인스턴스를 가리키는 참조라는 사실입니다. 인스턴스를 가르키는 참조와 인스턴스 자체는 다르다는 것을 알아두셨으면 좋겠습니다. public class ThisExample { private String name; private Integer age; private String address; public ThisExample() { this.name = "KBS"; this.age = 19; this.address = "Seoul"; } public S..

더 읽기

내가 본 워드프레스 핵심 구조 및 기능 (Wordpress Architecture and Function)

Language & Solution/Wordpress 새로비 2019. 6. 2. 20:04

| 워드프레스(Wordpress) 워드프레스는 CMS(Content Management System)으로서 웹사이트를 쉽게 호스팅할 수 있도록 제공되는 오픈소스 솔루션이다. php로 구성되어 있으며 보통 apache, mysql(mariadb)와 같이 연동되어 구성된다. 워드프레스 구조, php를 전혀 몰랐을 때 워드프레스의 구조와 각종 기능들이 어떻게 연동되며 동작하는 지 몰라 많이 헤멨었던 기억이 난다. 그동안에 여러 블로그와 책들을 봤지만 내가 원하는 핵심적으로 워드프레스의 구조와 기능을 설명하는 글은 딱히 찾아보지 못했고 워드프레스의 admin 페이지와 php 소스 코드를 분석해보고 나서 워드프레스가 어떻게 돌아가는 지 겨우 감을 잡을 수 있었다. 워드프레스의 핵심 구조만 알면 wp-admin 페..

더 읽기

[Redis, 레디스] 레디스 소개 및 아키텍처, 주의할 점(Redis Overview, Redis Architecture, Tool Tip)

Language & Solution/Redis 새로비 2019. 6. 1. 23:29

| Redis란? 레디스(Redis)는 고성능 key-value 저장소로서 리스트, 해시, 셋 정렬된 셋 등 여러 형식의 자료구조를 지원하는 NoSQL입니다. 메모리에 상주하면서 RDBMS의 캐시 솔루션으로서 주로 사용되며 라인, 삼성전자, 네이버, Stackoverflow, 인스타그램 등 여러 IT 대기업에서도 사용하는 검증된 오픈소스 솔루션입니다. 제가 일하는 회사에서도 Redis를 쓰고 있으며 RDBMS의 read부하를 줄이기 위해 Redis 클러스터 형태로 운영하고 있습니다. | Redis 사용용도 Redis는 Message Queue, Shared Memory, Remote Dictionary 용도로 사용할 수 있습니다. 특히 Remote Dictionary로서 RDBMS의 캐시 솔루션으로 사용..

더 읽기

VisualVM을 이용한 log4j2 로그 수준 변경 및 모니터링

Language & Solution/Java 새로비 2019. 5. 30. 23:40

| VisualVM VisualVM은 JVM 에서 동작하는 어플리케이션의 프로파일링 및 모니터링을 제공하는 GUI 툴입니다. 현재 다니고 있는 회사에서는 다른 JVM 모니터링 툴을 사용하지 않고 VisualVM을 통해 모니터링 및 프로파일링을 하고 있습니다. 다른 상용 툴(ex. 제니퍼소프트 제품들)들을 써보지 않아서 모르겠지만 VisualVM 만으로 아직까지는 큰 불편없이 19만줄 가량되는 마이크로아키텍처 기반 데이터 파이프라이닝 프로젝트를 운영하고 있습니다. | 실행 환경 Window 10 homeJava 1.8 IntelliJ IDE( Not Required ) | VisualVM을 이용한 log4j2 로그 수준 변경 운영을 하는 도중에 특정 Logger의 로깅 레벨 수준을 높여 DEBUG 및 TR..

더 읽기

[Java Library] slf4j + log4j2 한 방 정리

Language & Solution/Java 새로비 2019. 5. 27. 14:58

| slf4j와 log4j2 slf4j는 자바 로깅 시스템을 쉽게 사용할 수 있도록 해주는 라이브러리이며, 다양한 자바 로깅 시스템을 사용할 수 있도록 파사드 패턴(facade pattern) 및 추상화를 통해 로깅 기능을 제공합니다. slf4j를 사용함으로서 얻을 수 있는 이점은 기존에 사용하는 로깅 시스템을 교체하고 싶을 때, 소스 코드를 수정하지 않고도 maven이나 gradle의 의존성 설정만 바꾸면 손쉽게 적용할 수 있다는 점이죠. 예로들어 logback을 로깅 시스템으로 사용한 자바 어플리케이션이 log4j로 로깅 시스템을 바꿀 일이 있으면 의존성 설정과 설정 파일만 조정해 주면 손쉽게 소스 수정없이 migration이 가능하단 점입니다. log4j2는 자바 진영에서 제공하는 로깅 시스템이며 ..

더 읽기

자바스크립트 함수, 이것으로 종결하자

Language & Solution/Javscript 프로그래밍 새로비 2019. 3. 16. 16:02

| 참을 수 없는 거부감, 자바스크립트 함수 저번 포스팅에서 이야기한 것처럼 자바스크립트의 자유분방함은 자바에 어느정도 익숙한 나에게는 상당한 거부감으로 다가오고 있다. 자바보다 유연한 언어인 파이썬을 학습하면서도 이러한 거부감은 없었다. 이 거부감의 원인은 자바스크립트를 계속 학습하면서 깨닫게 되었다. 바로 낯선 "자바스크립트의 함수 동작 과정" 때문이란 것을 알게 되었다. 자바스크립트의 함수 동작 과정을 완전히 이해하기 위해서는 Scope Chaining, Lexcial Context, 함수 선언 방법, 함수 실행 방법 등 여러 가지 개념과 경우들을 따져야하기 때문이다. 자바스크립트는 일급함수다! 따라서 변수에다가 할당할 수도 있고 반환할 수도 있다! 클로져도 됨! 이라는 단순한 개념만 잡고 들어갈 ..

더 읽기

[Java] 새로운 게 무조건 더 좋은 방법은 아니다: Collections.nCopies()와 Stream에 관하여

Language & Solution/Java 새로비 2019. 3. 8. 23:51

더 읽기

자바스크립트(JavaScript) 실행 구조와 프로그램 평가, 실행과정

Language & Solution/Javscript 프로그래밍 새로비 2019. 2. 28. 21:36

현재 자그마한 쇼핑몰 솔루션을 사이트 프로젝트로 시작하는 중이다. 원래는 자바 기반 백엔드 쪽을 담당하고 있지만 결국에 클라이언트에게 제공해야할 화면을 만들어야 되기 때문에 자바스크립트를 공부하고 있는 중이다. 자바를 주로 하다가 자바스크립트를 공부하면서 그 유연성과 복잡스러움(?)을 느끼고 있고 동적 타입 언어가 제공하는 특징때문에 여러가지로 학습하는 데 애로사항이 피고 있다. 자바스크립트의 자유분방함은 아직 어색하기만 하다. 특히나 자바스크립트에서 프로그램이 어떻게 인터프리터에 의해 해석되고 실행되는 지 알 수 없는 상태에서 코드를 짜려고 보니 자바와 같은 컴파일 언어에서는 이해할 수 없는 동작방식으로 돌아갈 때 심히 당황하게된다. 이 기회에 헷갈리는 것들을 아예 정리하려고 이 글을 포스팅했다. | ..

더 읽기

npm과 lite-server로 HTML, CSS 실습관경 만들기

Language & Solution/Node.js 새로비 2019. 1. 15. 19:45

| NPM 사용해보기 다음과 같이 html 파일을 만듭니다.. └── index.html This is first npm usage npm is the greatest tool in javascript ecosystem 다음과 같은 명령어를 치면 npm을 이용하여 현재 node.js의 프로젝트의 의존성과 프로젝트 정보를 관리하는 package.json 파일을 손쉽게 생성할 수 있습니다. 원래는 index.js를 진입점으로 보통 정하지만 여기서는 html 파일을 진입점으로 정하겠습니다.npm initname: (bootstrap-coursera) version: (1.0.0) description: entry point: (index.js) index.html test command: git reposit..

더 읽기

Node.js 및 NPM(Node Package Manager) 개요

Language & Solution/Node.js 새로비 2019. 1. 15. 00:38

| Node.js V8 JavaScript 엔진 기반 위에 동작하는 자바스크립트 런타임 프레임워크비동기식 입출력(non-blocking I/O), 이벤트-기반(Event-driven) 처리싱글 스레드 아키텍처주로 서버 사이드 자바스크립트 웹 어플리케이션을 제작할 때 주로 쓰임 | Node.js 아키텍처 | NPM(Node Package Manager) Node.js의 모듈 및 패키지 환경을 관리하는 매니징 툴NPM이 관리하는 패키지에는 자바스크립트 파일들과 package.json이라는 메니페스트 파일(패키지의 메타데이터: 버전, 의존성 등을 나타내는 파일)이 포함됨Node.js로 만들어진 모듈을 웹 상에서 관리하므로 기존에 공개된 모듈들을 쉽게 설치하고 활용 가능 ( python의 pip, Java의 M..

더 읽기

Git 최초 설정 및 기본 명령어들

Language & Solution/Git 새로비 2019. 1. 14. 23:01

git --version : 깃 버전 확인 git config --global user.name "saelobi" : 유저 이름 설정 git config --global user.email "saelobi@power.com" : 유저 이메일 설정 git config --list : 설정 리스트 출력 git init : 깃 저장소를 현재 디렉터리에 초기화 한다. git status : 현재 디렉터리의 상태를 표시 git add : 현재 파일/디렉터리를 스테이징 공간에 올린다. gid add . : 현재 디렉터리에 있는 모든 파일, 디렉터리의 변화를 스테이징 공간에 올린다. (하위 디렉터리 포함) git commit : 깃 저장소에 현재 변화(스테이지의 변화)를 커밋한다.git commit -m "messa..

더 읽기

[HTML&CSS] 목록 작성하기 // <ul>, <ol>,<li>, <a href="#">, <dl>, <dt>, <dd>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 22:58

| , Unordered List를 뜻함. 순서가 없는 리스트를 작성할 때 쓰는 태그 Lorem ipsum ! Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur. | , Ordered List를 뜻함. 순서가 있는 리스트를 작성할 때 쓰는 태그 Lorem, ipsum. Lorem, ipsum. | 해당 텍스트를 클릭할 시 페이지 맨 위로 올라가게 끔 하는 태그 | , , 사전과 같은 용어에 대한 정의에 대한 리스트를 작성할 때 쓰는 태그들 : 정의에 대한 리스트를 나타내는 태그 (Definition List): 밑에 쓰이며 제목을 나타내는 데 쓰임 (Definition Title): 용어의 설명이 위치하는 태그 (Definition D..

더 읽기

[HTML&CSS] 제목, 문단, 연락처, 인용문 // <h1>~<h6>, <address>, <blockquote>, <hr>, <footer>, <pre>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 22:32

| ~ 제목을 나타내는 태그. 숫자가 커질수록 글자 크기가 줄어든다. heading 1 heading 2 heading 3 heading 4 | 새로운 내용이 나타내는 것을 나타내는 태그. 브라우져 상에는 한 줄이 그어진다. | 주소를 나타내는 태그 천안시 서북구 불당동 1167 202호 | 인용문을 나타내는 태그 So many times to go | 바닥글을 나타내는 태그 출처 :웹 접근성 연구소 | Preformatted Text의 약자. HTML 입력한 형태 그대로 보여주는 태그 So many times to rest | HTML 코드 DOCTYPE html> h1~h6, p, address, blockquote, hr, pre heading 1 heading 2 heading 3 heading ..

더 읽기

[HTML&CSS] 루비 주석과 시간 표현 // <ruby>, <rt>, <time>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 22:18

| , 텍스트에서 이 텍스트가 어떤 식으로 발음되는 지 혹은 어떤 의미인지 나타날 때 쓰는 태그다. 태그는 와 같이 쓰인다. 태그 안에 를 지정하여 해당 텍스트의 부가적인 정보를 텍스트 위에 나타내게 된다. 家和萬事成 (가화만사성) | 시간을 나타낼 때 쓰는 태그 : 현재 텍스트가 어떤 시간을 나타내는 지 속성으로 나타낼 수 있다. | HTML 코드 DOCTYPE html> Document 家和萬事成 (가화만사성) 家가 和화 萬만 事사 成성 오늘친구 생일이라서 일찍 들어가 봐야 합니다. 논문 발표일은 2017월 9월11일입니다. | 결과 家和萬事成(가화만사성)家가和화萬만事사成성오늘친구 생일이라서 일찍 들어가 봐야 합니다.논문 발표일은 2017월 9월11일입니다.

더 읽기

[HTML&CSS] 단어의 정의, 약어, 작품의 제목 표현 // <dfn>, <abbr>, <cite>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 21:50

| 마우스를 해당 텍스트에 올려 놓았을 때(hovering) 표시되는 텍스트를 표시. : hovering 했을 때 [DESCRIPTION] 문자열이 뜸 HTML | 축약된 텍스트라는 것을 나타낼 때 쓰는 태그 : hovering 했을 때 [DESCRIPTION] 문자열이 뜸 W3C | 영화 제목, 음악 제목 등 작품의 제목을 표현할 때 쓰는 태그 시차 (We Are) | HTML 코드 DOCTYPE html> dfn, abbr, cite HTML 월드 와이드 웹 컨소시엄W3C 시차 (we are) (feat. 로꼬 & GRAY) 우원재 시차 (We Are) 우원재 값 : 50,000 (부가세별도) | 결과 HTML 월드 와이드 웹 컨소시엄W3C 시차 (we are) (feat. 로꼬 & GRAY) 우원재..

더 읽기

[HTML&CSS] 구문 강조, 하이라이팅(Highlight) 지정 <string>, <em>, <mark>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 21:08

| 태그HTML에서 무언가를 강조할 때 쓰는 태그 기본적으로 볼드체로 보여진다. | 태그 태그와 쓰이는 용도가 비슷. 기본적으로 기울여진 채로 표시된다. 가장 이쁜 꽃은 장미다. | 태그HTML의 어떤 부분을 마킹할 때 쓰이는 태그 기본적으로 노란색으로 글씨가 마킹된 채로 표시된다. It is very important thing that | 전체 HTML 코드 DOCTYPE html> string, em, mark string, em, mark 우리집 화단에서 가장 이쁜 꽃은 장미다. 저기 있는 웅덩이는 깊어서 위험하므로 들어가지 마시오. It is very important thing that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Se..

더 읽기

Copyright © 새로비 All Rights Reserved

Designed by JB FACTORY

티스토리툴바