FrontEnd (14) 썸네일형 리스트형 웹 문서의 이미지 및 미디어 삽입 이번 포스팅은 HTML 웹 문서에서의 이미지 및 여러 미디어 삽입 방법에 대해 포스팅하려 합니다. 포스팅 순서는 이미지 삽입, 오디오 삽입, 하이퍼링크 삽입 입니다. 이미지 삽입 HTML 문서의 태그에 태그를 추가해주었습니다. 태그안에는 src와 alt가 있습니다. src는 해당 이미지 파일의 경로, alt는 텍스트를 이야기 합니다.작성법은 가 됩니다. 태그 사용시 경로로 설정된 이미지를 브라우저에 띄울 경우 이미지 사이즈 원본에 맞게 나오므로 CSS 파일에서 태그에 대한 속성을 부여해줍니다. width(이미지 너비), height(이미지 높이)를 각각 임의의 값으로 지정하여 적용을 시키면 아래와 같이 나오게 됩니다. CSS 파일에서는 이미지 크기를 px로 조정했지만 %를 이용해서 조절 할.. 웹 문서의 표 만들기 안녕하세요. 이번 포스팅에서는 HTML 웹 문서에서 표를 만드는 방법을 포스팅 합니다. 표를 만드는 태그는 , 과 행을 만드는 태그 , 셀을 만드는 , 태그, 표의 구조인 , , 이 있습니다. 예시를 보겠습니다. 태그 안에 태그를 생성하여 , 태그를 이용하여 행과 열을 만들어 줍니다.웹 문서에서 태그 작성 시 화면에는 표가 나오지 않고 텍스트만 출력이 됩니다.표를 출력하기 위해서는 별도의 CSS 파일을 생성하여 다음과 같이 작성한 후 웹문서에 를 추가해줍니다. CSS 파일을 연결하여 생성된 결과입니다. 결과물을 보면 현재 작성된 표는 1개의 행에 3개의 열로 구성된 것을 볼 수 있습니다. 다음은 표의 구조입니다. 먼저 부분은 다음과 같이 작성하였습니다. 그리고 와 의 부분에 각각 row.. 리액트 컴포넌트 만들기 [덧붙이기] 이전의 리액트 포스트에서 컴포넌트를 만드는 방법을 포스팅 하였습니다. https://ktw2408.tistory.com/29 리액트의 컴포넌트 만들기 왼쪽의 html 코드를 js 코드로 바꾸는 과정은 다음과 같이 진행합니다. 1. 컴포넌트를 만들겠다는 클래스를 선언한다. - App.js의 5번 줄의 class Subject extends Component 보면 Subject라는 클래스를 만들겠다 ktw2408.tistory.com 이에 앞서 컴포넌트가 무엇이고 어디에 쓰이는지에 대해 포스팅 해보도록하겠습니다. 먼저 컴포넌트는 사전적 의미로 "요소" 입니다. 이 요소들의 간략한 예시로는 기계를 구성하는 부품이나 해당 기계에서만 동작하도록 제작된 것으로 부터 범용의 기계요소를 포함하는 것 전자기기, 전자제품.. 리액트의 컴포넌트 만들기 왼쪽의 html 코드를 js 코드로 바꾸는 과정은 다음과 같이 진행합니다. 1. 컴포넌트를 만들겠다는 클래스를 선언한다. - App.js의 5번 줄의 class Subject extends Component 보면 Subject라는 클래스를 만들겠다는 선언을 합니다. - 선언할 컴포넌트 이름은 대문자로 작성합니다. (Subject가 컴포넌트 이름) 2. render 함수를 선언한다. - 원래는 함수 선언 할 때는 function으로 선언하는데 자바스크립트 최신 문법에서는 function을 생략합니다. 3. return 안에는 최상위 태그로 시작해야 합니다. - 이 최상위 태그이므로 에서 시작을한다. 아래의 App 컴포넌트는 태그가 최상위 이므로 하나의 태그만을 리턴한다. 즉, 현재 작성한 구문에서 리턴을 .. 리액트에서의 코딩과 배포 리액트에서 코딩과 배포를 하기 위해서는 먼저 디렉터리 구조를 살펴 봅니다. 1. 자바스크립트 먼저 public 폴더를 살펴보면 index.html 파일이 있습니다. 이 html파일은 리액트 앱을 실행하였을 때 나오는 첫 화면을 말합니다. index.html 파일의 코드 중 가 있는데 이는 id가 "root"인 div 요소에 들어가게 약속을 한 것입니다. 이를 개발자 도구로 확인해 보면 id가 "root"인 태그를 확인 할 수 있습니다. 이를 수정하는 방법으로는 src 디렉터리에서 작업을 합니다. index.js는 앱의 진입점 역할을 합니다. 코드를 살펴보면 11번 줄의 document.getElementById('root')는 id가 root인 자바스크립트의 선택자 문법을 의미합니다. 9번 줄의 는 컴포.. 리액트 웹 실행 시키기 앞서 리액트 설치 과정까지 완료하였다면 이제 리액트의 기본 웹앱을 실행을 시켜봅시다. (이전에 포스팅한 설치 방법을 링크해두었습니다.) https://ktw2408.tistory.com/3?category=950829 React 의 간단 개념과 설치 방법 React는 유저 인터페이스를 구현을 위한 선언적이고 유연한 JavaScript 라이브러리라고 불려지며 페이스북에서 개발하였습니다. 또한 React는 프론트엔드 개발자 사이에서 Angular, Vue와 더불어 많이 ktw2408.tistory.com VS CODE를 실행시킨 뒤 탐색기 화면을 보면 react-app 폴더 안에는 여러가지 폴더와 파일이 있습니다. (build 폴더의 경우 처음에는 생성되지 않습니다.) 모든 개발 환경이 갖추어졌으면 터미널에.. CSS의 선택자와 캐스케이드 CSS 선택자는 웹 문서의 어느 부분에 스타일을 적용할 지 알려주는 것이며, 여러 선택자들이 있습니다. 1. 전체 선택자 : CSS 스타일을 문서의 모든 요소에 적용할 때 사용합니다. 전체 선택자는 웹 브라우저의 기본 스타일을 초기화 할 때 자주 사용합니다. 전체 선택자를 사용하기 전의 이미지를 보면 마진 여백이 존재하였습니다. 전체 선택자를 사용하게 되면 여백이 없어서 이미지가 웹 브라우저 창에 딱 붙어서 나타납니다. 2. 타입 선택자 : 특정 태그를 사요한 모든 요소에 스타일을 적용합니다. 태그에 font-style 속성을 사용하여 글자 스타일의 변화를 살펴보면 태그의 내용들이 기울임꼴이 되어 있음을 확인 할 수 있습니다. 3. 클래스 선택자와 아이디 선택자 - 클래스 선택자 : 특정 부분만 선택하여.. CSS의 정의 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 웹 문서에서의 디자인을 담당하는 역할을 합니다. CSS 소스에서 한 줄이 하나의 스타일에 해당되며 CSS 스타일의 형식은 다음과 같습니다. ◆선택자 {속성1: 속성값1; 속성2: 속성값2} [예] h1 {color: blue; font-size: 12px;} → h1: 선택자, {color: blue; font-size: 12px;} : 선언부 위와 같이 스타일 규칙을 작성하는 방법으론 세미콜론(;)으로 구분하여 중괄호({ })안에 나열합니다. 주석 표시는 /* */로 표시하며 표시 사이에 내용을 입력합니다. 웹 문서안에는 스타일 규칙을 여러 개 사용하는데 이런 스타일 규칙을 한눈에 확인하고 필요할 때 마다 수정하기 쉽도록 한곳에 .. 이전 1 2 다음
