728x90

분류 전체보기 71

CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서

셀렉터 (selector)HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능 여러 유형의 셀렉터를 작성할 수 있다. 예) 웹 페이지의 모든 태그에 color:brown 스타일 적용하는 h3 셀렉터 생성h3(셀렉터) {  color : brown; } 태그 이름 셀렉터태그 이름이 셀렉터로 사용되는 유형.셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용h3, li { color : brown; }class 셀렉터셀렉터 앞에 점 (.)을 찍어준다. 점으로 시작하는 셀렉터 HTML 태그에서 사용하려면 class 속성으로 접근해야 된다. .warning { color : red; }body.main { background : aliceblue; }태그에 적용이 되지 않고, 태그에만 적용 -->60..

Front-end 2024.07.31

CSS 스타일 시트

CSS (Cascading Style Sheet)HTML 문서의 색이나 모양 등 외관을 꾸미는 언어CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.현재 CSS3 : CSS level 3CSS3의 기능색상, 배경텍스트폰트박스 모델(Box Model)비주얼 포맷 및 효과리스트테이블사용자 인터페이스CSS3 스타일 시트 구성셀렉터 { 프로퍼티 : 값 ; }셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름(태그 이름)프로퍼티 : 스타일 속성 이름, 약 200개정도의 프로퍼티가 있음.값 : 프로퍼티의 값ex) 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일 시트 정의span { font-size : 20px; color : blue; } +) 기타 CSS 특징대소문..

Front-end 2024.07.31

[HTML5] 웹 폼

웹 폼웹 페이지에서 사용자 입력을 받는 폼로그인, 등록, 검색, 예약, 쇼핑 등 요소폼을 만드는 다양한 태그, , .......+) 태그는 종료 태그가 없다.작성폼 태그( )로 둘러싸는 형태, 컨테이너 action = "웹 서버의 응용프로그램의 URL(보낼 데이터를 처리할 url)" method = "데이터의 전송 방식 GET | POST" name = "폼이름" enctype = "데이터의 인코딩 타입(폼 데이터를 웹 서버로 전송할 때 암호화 방식(동영상 자료, 파일 크기가 큰 자료 전송시에만 사용함)" target = "윈도우이름"> name 속성폼이름 지정 action 속성폼 데이터를 처리할 웹 서버 응용프로그램의 이름 (보낼 url)submit 버튼이 눌리면 브라우저는 action에 지정된 웹..

Front-end 2024.07.31

[HTML5] 시맨틱 웹 _ 문서 구조화

기존 HTML 한계웹 문서 구조를 표현하는 태그가 없었다. 기존 태그 - 등 : 문서의 구조나 의미 전달 어려움이 있었다. 그~~래~~서~~!문서 구조화문서 구조화를 해보자! 왜?검색 엔진이 좋아하는 웹 페이지 작성의 필요성 대두정보탐색이 중요해진 시대.사물 인터넷으로 IT 장치들이 스스로 정보 탐색하는 시대사용자가 만든 웹 페이지 가치 극대화 - 탐색이 쉽게끔태그나, 태그로 구조화되어 보이게 작성. 시맨틱 웹웹 문서를 구조화하여 의미있는 내용 탐색이 용이한 웹 시맨틱 태그문서의 구조와 의미를 전달하는 태그. CSS3를 이용하여 직접 위치와 색, 모양을 지정해줘야 한다.지정하지 않으면 텍스트만  출력됨.  등등 구글의 검색엔진 사례웹 페이지에서 시맨틱 태그 검색.리뷰, 사람, 제품, 업체, 이벤트, 음..

Front-end 2024.07.31

[HTML5] <a>태그, <iframe>태그, 미디어 삽입

태그 : Anchor(배의 닻) 항해 : 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것. 태그의 필수 속성 : href 하이퍼링크 만들기 하이퍼링크란?다른 html 페이지의 연결 고리(같은 웹 페이지의 다른 html 페이지)(다른 웹 사이트의 html 페이지로 모두 연결 가능) 하이퍼링크는 텍스트나 이미지로 작성할 수 있다. 형식 예시같은 사이트에 있는 웹 페이지 연결 클릭하면, 해당 페이지로 이동합니다.다른 웹 사이트의 웹 페이지 연결구글이미지로 하이퍼링크 만들기  하이퍼링크 텍스트의 색 (default값)링크 텍스트의 처음 색 : 밑줄과 함께 blue방문 후 링크 색 : 보라색 purple마우스로 링크를 누르고 있는 동안 : 빨간색 red +) 링크 색 변경 가능 - css3를 이용하여 링크 색 지..

Front-end 2024.07.31

[HTML5] 기초

HTML 기본 구조태그가 기본이다. 기본 태그,  문서의 본문, 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등 - html문서의 종료HTML 태그의 특징구성imgsrc"heart.jpg"alt"사랑합니다."태그이름속성1속성값속성2속성값 각 속성은 공백문자(띄어쓰기)로 구분해준다. 시작태그 & 종료태그대부분의 태그는 시작태그와 종료태그로 구성되어 있다. ,  시작태그O, 종료태그 X시작태그만 있고 종료태그가 없는 태그도 있다., 대소문자 구분태그와 속성은 대소문자 구분하지 않는다. ,  무방하다.  속성값은 대소문자를 구분해야 된다.heart.jpg != Heart.jpg 공백 문자태그의 속성 값에 불필요한 공백문자는 사용하지 않는다. 기타 TIP - 문자, 기호, 심볼 입력HTML5의 ..

Front-end 2024.07.29

웹 기초

웹의 기본 목적과 구성웹(web)의 기본 목적 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적.웹에서 다루는 문서를 웹 문서라고 부른다.웹의 구조인터넷을 활용하여 거미줄처럼 연결된 정보 소통 망 (World Wide Web)웹의 구성웹서버와 웹 클라이언트 컴퓨터들로 구성웹서버웹 사이트를 탑재하는 컴퓨터, 구글, 네이버.... 등웹문서, 이미지, 동영상 등의 데이터 저장 관리웹 클라이언트의 요청을 받아 웹 문서 전송웹 서버로 작동하도록 하는 소프트웨어 실행웹 클라이언트사용자 인터페이스 담당 웹 서버에 웹 문서를 요청하고 받아서 사용자에게 출력인터넷 != 웹인터넷웹의 개념이 나오기 전부터 만들어진, 컴퓨터 네크워크 여러 대학들과 계약 업체 사이의 컴퓨터를 연결 컴퓨터마다 고유한 주소(IP주소)를 부여하여 ..

Front-end 2024.07.29

[AI] 딥페이크 탐지 기술_GAN으로 생성한 이미지를 Gradient 변환하여 탐지하기

참조 논문 : Learning on Gradients: Generalized Artifacts Representation for GAN-Generated Images Detection  해당 논문의 github 주소 : LGrad 개발 환경PyCharm / python 3.8순서1. Getting the Data데이터 다운받기다음 주소에서 'Data'에 해당하는 부분의 Readme를 보고, 데이터를 다운받는다.https://github.com/peterwang512/CNNDetection GitHub - PeterWang512/CNNDetection: Code for the paper: CNN-generated images are surprisingly easy to spot... for now htt..

AI 2024.07.25

Mac 맥 파이썬python(ver 3.12) 설치

파이썬 설치, 실행1. 파이썬 다운로드 페이지에 들어가서 다운로드 버튼 누르기https://www.python.org/downloads/  Download PythonThe official home of the Python Programming Languagewww.python.org 현 시점 가장 최근 버전인 3.12.4버전을 설치해주었습니다. 2. 다운로드 항목 더블클릭  3. 세부 과정들 계속 / 계속 / 계속 / 동의 / 설치 / 암호 /   4. 설치 완료암호를 입력하면 바로 설치가 되며, 설치 완료가 되면 다음 안내창이 나온다. 닫기 눌러주기  5. 설치 확인Finder에서 응용프로그램 들어가면, Python 3.12 폴더를 확인할 수 있을 것이다. 터미널 실행해서 다음 명령어 입력해보면, 설..

카테고리 없음 2024.06.26

스프링과 객체 지향 프로그래밍 - SOLID(객체 지향 설계의 5가지 원칙) 관점

SOLIDSRP : 단일 책임 원칙Single Responsibility Principle한 클래스는 하나의 책임만 가져야 한다. 큰 책임이든, 작은 책임이든, 변경이 있을 때 파급 효과가 적어야한다. 변경이 있어도 다른 곳에는 영향을 끼치지 않게계층을 잘 나누는 것은 단일 책임 원칙을 지키기 위함이다.   OCP : 개방-폐쇄 원칙Open/Closed Principle소프트웨어 요소는 확장에는 열려있으나, 변경에는 닫혀있어야 한다. java에서의 다형성을 활용하여 OCP를 지킬 수 있다. 역할과 구현의 분리를 생각해보자.인터페이스(역할)를 구현한 새로운 클래스를 하나 만들어서 새로운 기능을 구현할 수 있다. 확장에는 열려있다 : 인터페이스를 구현한 새로운 클래스는 얼마든 만들 수 있다.변경에는 닫혀있다..

Web/SrpingBoot 2024.05.05
728x90