방법1) new {@class= " "} 적용해주기

Html.ActionLink("My Link", "MyAction", null, new { @class = "my-class" })

 

a.my-class { color: #333333 }

a.my-class:active { color: #666666 }

a.my-class:link { color: #999999 }

a.my-class:visited { color: #CCCCCC }

 

방법2) new {@style= " "} 적용해주기

@Html.ActionLink(@detail.fileName, "LinkButton_Click", new { filename = detail.fileName}, new {@style="color: #78c2ad"})

 

 

 

'프로그램 > .NET' 카테고리의 다른 글

[C#] from 절 사용하기  (0) 2021.03.12
[C#] foreach문 사용하기  (0) 2021.03.12
[C#] C#에서 Oracle 사용(OracleConnection, OracleCommand)  (0) 2021.03.11
[C#] #region 사용하기  (0) 2021.03.11

 

[ERROR]

"런타임 프로세스에 연결할 수 없습니다. 10000ms 후 시간 초과-(이유 : 대상에 연결할 수 없음 : ECONNREFUSED 127.0.0.1:61435연결)"

 

해결 방법

Visual Studio에서 도구-> 옵션-> 디버깅-> 일반으로 이동합니다.

  • Asp.Net (Chrome, Edge 및 IE)에 대한 JavaScript 디버깅 활성화
  • ASP.NET 용 레거시 Chrome JavaScript 디버거 사용

DEXT.FileUploaad를 사용하였습니다.

파일 업로드

write.asp

<form id="Form" action="write_db.asp" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>FORM</legend>
    <!-- chkword(this, 20) : javascript 글자 수 제한 함수 -->
    <!-- checkAll() : javascript 공백 여부 확인 함수 -->
    <div class="form-group">
      <label> 작성자</label>
      <input type="text" name="userWriter" id="userWriter" class="form-control" onkeyup="chkword(this, 20)" placeholder="Enter writer"/>
    </div>
    <div class="form-group">
	    <label> 제목</label>
    	<input type="text" name="userTitle" id="userTitle" class="form-control" onkeyup="chkword(this, 60)" placeholder="Enter title"/>
    </div>
    <div class="form-group">
    	<label> 내용</label>
    	<textarea name="userContent" id="userContent" class="form-control" onkeyup="chkword(this, 200)" rows="5" cols="70" wrap="hard"></textarea>
    </div>
    <div class="form-group">
        <label> 첨부파일</label><br/>
    	<input type="file" name="file"><br>
    </div>
    <div class="form-group">
    	<label>글 비밀번호</label>
    	<input type="password" name="userPassword" id="userPassword" class="form-control" onkeyup ="chkword(this, 15)"  placeholder="Password"/>
    </div>
    <div style="text-align:center">
    	<input type="button" class="btn btn-primary" value="글 작성" onclick="checkAll()">
    	<input type="button" style="text-align:left" class ="btn btn-secondary" value="목록" onclick="location.href='/Board_asp/list.asp'">
    </div>
  </fieldset>
</form>

form태그에 enctype="multipart/from-data"를 추가해주고, <input type="file">을 추가해준다.

 

write_db.asp

' 파일 업로드 
Set uploadform = Server.CreateObject("DEXT.FileUpload")
path = "/Board_asp/upload"			
up_path = server.MapPath(path)
uploadform.DefaultPath=up_path
fileLen = uploadform("file").FileLen

uploadform.AutoMakeFolder = True		'폴더생성 여부
uploadform.DefaultPath    = up_path		'폴더위치 설정
uploadform.MaxFileLen     = 5242880 	'파일크기 제한 : 5242880(5M)
uploadform.UploadTimeout  = 1800	

server.MapPath : 경로를 반환하는 기능으로 파일을 업/다운로드 할 때 주로 사용합니다.

uploadform.FileLen : 업로드된 파일의 길이를 나타냅니다.

uploadform.AutoMakeFolder : 폴더가 존재 하지 않을 경우 자동으로 생성합니다.

uploadform.DefaultPath : 파일이 저장될 폴더 경로를 설정합니다.

uploadform.MaxFileLen : 하나의 파일 크기를 5M으로 제한합니다.

uploadform.UploadTimeout : 업로드 Timeout을 설정합니다. 

 

Dim Writer, Password, Title, Contents, oldname     

Writer = uploadform("userWriter")
Password = uploadform("userPassword")
Title = uploadform("userTitle")
Content = uploadform("userContent")
oldname = uploadform("file").FileName   '업로드한 파일 이름

form태그의 enctype이 multipart/form-data인 경우,

ASP에서 request.form 객체로 form데이터를 얻을 수 없으므로Request.Form으로 받은 파라미터를 uploadform으로 바꿔줍니다.

 

' 파일 용량 체크
If fileLen > uploadform.MaxFileLen Then
  response.write "<script language=""javascript"">alert('5M 이상의 사이즈인 파일은 업로드하실 수 없습니다.');"
  Response.Write "history.back(-1);"
  Response.Write "</script>"
  set theForm=nothing
  Response.end

  set fileLen = nothing
  response.End
else
  filePath = uploadform.Save
  	...

uploadform.Save : 업로드된 파일을 서버에 디스크파일 형태로 저장합니다.

 

파일 다운로드

<%
    no_param = request.QueryString("no")

    Set oraConn = Server.CreateObject("ADODB.Connection")
    oraConn.Open("dsn={};uid={};pwd={};")
  
    Set oraRec = Server.CreateObject("ADODB.Recordset")

    sql = "SELECT FILENAME FROM BOARD WHERE USETF = 1 AND NO =" & no_param

    oraRec.Open sql, oraConn
    
    set rs = oraConn.Execute(sql)

    ' 첨부파일 다운로드
    Dim file
    file = rs(0)
    strPath = Server.MapPath("upload/" & file &"")
    Response.AddHeader "Content-Disposition","attachment; filename=" & file &""""
    Response.ContentType = "application/x-msdownload"

    Response.CacheControl = "private"

    Set objFS = Server.CreateObject("Scripting.FileSystemObject")
    Set objF = objFS.GetFile(strPath)

    Response.AddHeader "Content-Length", objF.Size

    set objF = nothing
    set objFS = nothing
    
    Set objStream = Server.CreateObject("ADODB.Stream")
    objStream.Open
    objStream.Type = 1
    objStream.LoadFromFile(strPath)

    download = objStream.Read
    Response.BinaryWrite download

    Set objstream = nothing
%>

 

※ 동일 이름의 파일 저장 시 (1), (2) 이런 식으로 저장하여 파일을 덮어쓰지 않는다.

filePath = uploadform.SaveAs(oldname, False)        // 파일 저장 (동일 이름 파일 저장 시 (1), (2) 이런 식으로 저장됨)
strLen = Len(filePath)                              // 파일 경로의 전체 길이
ipos = instrRev(filePath, "\")                      // 문자 '\' 마지막에 위치하는 자리 수 
uploadFile = MID(filePath, ipos+1, (strLen-ipos))   // ipos+1부터 (strLen-ipos)개의 문자를 반환 => 저장된 파일 명

 

1. DB에 실제 저장되는 파일의 이름을 담을 컬럼(UPLOADFILE)을 추가한다.

  • FILENAME : 업로드 할 첨부 파일의 이름
  • UPLOADFILE : 폴더에 저장되는 첨부 파일의 이름 

2. uploadform.SaveAs(oldname, False) 로 파일 저장된다. 

  • 동일 이름의 파일이 있을 시 (1), (2) 이런 식으로 저장된다.
  • filePath에는 첨부 파일의 주소가 저장된다.

3. Len(filePath) : 첨부 파일 경로의 전체 길이를 구한다.

4. instrRev(filePath, "\") : 다른 문자열 내에서 문자 '\'의 발생 위치를 문자열 끝에서부터 계산하여 반환한다.

5. MID(filePath, ipos + 1, (strLen - ipos)) : ipos + 1부터 (strLen - ipos)개의 문자를 반환한다. => UPLOADFILE 

 

ODBC (Open DataBase Connectivity)

ODBC는 데이터베이스를 엑세스하기 위한 표준 개방형 응용 프로그램 인터페이스를 말합니다.

마이크로소프트사에 의해 만들어진, 데이터베이스에 접근하기 위한 소프트웨어의 표준 규격으로,

프로그램 내에 ODBC 문장을 사용하면 여러 종류의 데이터베이스에 접근할 수 있습니다.

 

ASP 페이지에서 데이터베이스 연동

ASP에서는 데이터베이스와의 연동을 위해서 3가지 개체를 제공하고 있습니다.

  • Connection Object (ADODB.Connection)
  • Recordset Object (ADODB.Recordset)
  • Command Object (ADODB.Command)

 

1. Connection 개체

Connection 개체는 특정 데이터베이스와 연결을 할 수 있게 해주는 개체이며, 리턴 결과 레코드가 없는 간단한 쿼리를 수행할 수 있습니다.

Set oraConn = Server.CreateObject("ADODB.Connection")
oraConn.Open("dsn={dsn};uid={uid};pwd={pwd}")

Server.CreateObject가 하는 역할은 ASP에서 사용이 가능한 개체의 인스턴스를 만들어주는 역할을 하는 메소드입니다. Connection 개체의 가장 큰 역할은 데이터베이스와 연결(Open메소드) 하는 것입니다.

그 이외에도 반환 결과 레코드가 없는 쿼리(INSERT, UPDATE, DELETE)의 경우를 실행할 수 있는 기능(Execute 메소드)도 가지고 있습니다. 

 

2. Recordset 개체

Recordset 개체는 쿼리 결과로 추출된 데이터를 보관하는 역할을 해주는 개체이며, Connection 개체와 마찬가지로 Open메소드를 가지고있습니다.

첫 번째 인자는 쿼리문으로 넣고, 두 번째 인자는 데이터베이스 Connection 개체입니다.

Set oraRec = Server.CreateObject("ADODB.Recordset")
sql = "SELECT * FROM BOARD"
oraRec.Open sql, oraConn

 

ASP에서 데이터 보여주기 (SELECT)

<%
Set oraConn = Server.CreateObject("ADODB.Connection")
oraConn.Open("dsn={dsn}; uid={uid}; pwd={pwd}") 

Set Rs = Server.CreateObject("ADOBO.RecordSet")
SQL = "SELECT * FROM BOARD"
oraRec.Open sql, oraConn
%>

<HTML>
<HEAD><TITLE> ASP DB 연결하기 </TITLE></HEAD>
<BODY>
<% If oraRec.BOF Then %>
요구하신 데이터가 없습니다.
<% Else %>
  <% Do Until oraRec.EOF %>
	작성자는 <%=oraRec("writer")%>,
    제목은 <%=oraRec("title")%> 입니다.
  <% oraRec.MoveNext %>
  <% Loop %>
<% End If %>
</BODY>
</HTML>

13줄은 데이터가 하나도 없을 경우를 위한 처리입니다.

BOF는 Begin Of File로 레코드 셋의 시작, EOF는 End Of File로 레코드 셋의 끝을 의미한다. 레코드가 하나가 아닌 경우 가상 테이블의 형태로 레코드셋이 저장되고 그 시작과 끝을 구분해주는 것이 BOF와 EOF이다.

DB에 데이터가 있는 경우 oraRec.EOF와 oraRec.BOF는 false가 되고 데이터가 없는 경우 true가 된다.

 

ASP에서 데이터 입력하기 (INSERT, UPDATE, DELETE)

ASP에서 데이터를 출력할 때는 그 데이터를 담을 Recordset개체가 필요했지만

데이터 입력의 경우 Connection 개체와 함께 쿼리를 실행할 Execute 메소드를 통해 데이터를 입력합니다. (데이터를 담을 필요가 없기 때문에 Recordset개체는 필요 없습니다.)

<%
Writer = "작성자"
Title = "제목"

Set oraConn = Server.CreateObject("ADODB.Connection")
oraConn.Open("dsn={dsn};uid={uid};pwd={pwd}")

Set oraRec = Server.CreateObject("ADODB.Recordset")
sql = "INSERT INTO BOARD(WRITER, TITLE) VALUES " 
sql = sql & Writer &"' WRITER, '"
sql = sql & Title &"' TITLE)" 

oraRec.Execute sql
%>

 

[출처] m.blog.naver.com/PostView.nhn?blogId=passith&logNo=70150438074&proxyReferer=https:%2F%2Fwww.google.com%2F

1. 해당 글의 조회수를 보여줍니다.

2. 작성자 / 제목 별 검색 기능이 있습니다.

3. 한 페이지에 10개의 게시글5페이지씩 보여주고 +5, -5페이지를 나타내는 << , >> 버튼이 있습니다.

4. 계층형 게시판(답글)을 볼 수 있습니다.

 

 

List.asp (글 목록 페이지)

<%
    Dim intNowPage, intTotalCount, intTotalPage, intBlockPage, intPageSize
    Dim intTemp, intLoop
    Dim strSearchWord, strSearchString, strSearchSQL
    Dim blnSearch

    intNowPage = Request.QueryString("page")
    strSearchWord = Request.QueryString("search_word")
    strSearchString = Request.QueryString("search_string")
    blnSearch = false
    intPageSize = 10
    intBlockPage = 5

    If Len(intNowPage) = 0 Then
        intNowPage =1
    End If

    If Len(strSearchString) <> 0 Then
        blnSearch = true
        strSearchSQL = " Where " & strSearchWord
        strSearchSQL = strSearchSQL & " like '%" & strSearchString & "%'"
    End If

    sql = "SELECT COUNT(*), CEIL(CAST(COUNT(*) AS FLOAT)/" & intPageSize & ") FROM BOARD"
    If blnSearch Then
        sql = sql & strSearchSql
    End If

    Set oraConn = Server.CreateObject("ADODB.Connection")
    oraConn.Open("dsn={DB};uid={id};pwd={pwd}")

    Set oraRec = Server.CreateObject("ADODB.Recordset")

    oraRec.Open sql, oraConn

    intTotalCount = oraRec(0)
    intTotalPage = oraRec(1)
    oraRec.Close

    sql = "select * from (select rownum as rnum, z.* from (select * from board "
    If blnSearch Then
        sql = sql & strSearchSQL
    End If
    sql = sql & " order by refer desc, step) z where rownum <=" & intPageSize * intNowPage & ")where rnum >= " & intPageSize * (intNowPage -1) + 1

    oraRec.Open sql, oraConn
%>

 

[페이징 기능을 위해 필요한 변수]

intNowPage : 현재 페이지가 몇 번째 페이지인지 나타내는 변수

intTotalCount : 전체 게시물의 갯수

intTotalPage : 총 페이지의 수

intBlockPage : 페이지를 몇 개씩 구분할 것인지 (이전 O개, 다음 O개 할 때 사용) 나타내는 변수

intPageSize : 한 페이지에 몇 개의 게시까지 보이게 할지를 결정하는 변수

intTemp, intLoop : Do ~ Loop 문을 돌때마다 증가되는 임시로 사용되는 정수형 변수

 

[검색 기능을 위해 필요한 변수]

strSearchWord : 검색 조건

strSearchString : 검색어

strSearchSQL : 검색에 관련된 조건문을 추가할 때 붙을 SQL문이 들어갈 변수

blnSearch : 검색이 실행되었는지(true) 아닌지(false)를 나타내는 변수 (처음엔 false로 지정)

 

7) 현재의 페이지가 몇 페이지인지를 받아오는 부분.

8) 검색 조건을 받아오는 부분

9) 검색어를 받아오는 부분 

14) intNowPage 변수에 값이 없으면 현재 페이지를 1로 지정. Len( ) 함수 : 괄호 안에 있는 문자열의 길이(글자의 갯수)를 반환

18) strSearchString 변수에 값이 들어있으면 blnSearch 를 true(검색 실행) 으로 변경 후 strSearchSQL 쿼리문 입력

24) CEIL( ) 함수 : 괄호 안에 들어있는 지정한 숫자 식보다 크거나 같은 최소 정수를 반환

CAST(내용 AS 변환하려는 형식) 함수 : '내용' 에 해당하는 문장을 '변환하려는 형식'에 맞게 변환

SELECT COUNT(*), CEIL(CAST(COUNT(*) AS FLOAT) / intPageSize) FROM BOARD

 

36) COUNT(*) 을 intTotalCount 에 저장

37) CEIL(CAST(COUNT(*) AS FLOAT) / intPageSize) 을 총 페이지의 수 intTotalPage 에 저장

38) oraRec을 close 해줘야 46)에서로젝트 기획

41) blnSearch 가 true(검색이 실행) 이면 sql문에 strSearchSQL 을 ORDER BY 절 전에 추가

프로젝트 기획

 

1차 CRUD 구현, 페이징, 검색 기능, 조회수, 댓글 기능, 답글 기능
2차 파일 첨부 기능
3차 에디터 기능

 

DB 테이블 구성

 

BOARD : 게시판 테이블

BOARD
열 이름 형식 설명
NO NUMBER 글 번호 (기본키)
WRITER VARCHAR2(50) 작성자
PASSWORD VARCHAR2(15) 글 비밀번호(삭제, 수정 시 필요)
TITLE VARCHAR2(100) 제목
CONTENT VARCHAR2(4000) 내용
READCOUNT NUMBER 조회수
REGDATE DATE 작성일
REFER NUMBER [답글] 참조
STEP NUMBER [답글] 간격
DEPTH NUMBER [답글] 깊이
FILENAME VARCHAR2(100) [2차] 파일 이름

 

BOARD_RE : 댓글 테이블

BOARD_RE
열 이름 형식 설명
RE_NO NUMBER 댓글 번호 (기본키)
BRD_NO NUMBER 원글 번호
RE_WRITER VARCHAR2(20) 댓글 작성자
RE_CONTENT VARCHAR2(200) 댓글 내용
RE_REGDATE DATE 댓글 작성일

 

 

width, height 속성

width와 height는 각각 가로길이, 세로 길이를 의미한다.

 

margin, padding 속성

margin과 padding은 각각 바깥쪽 여백, 안쪽 여백을 의미한다.

방향마다 여백을 다르게 설정할 수 있으며 방향의 위부터 시계방향으로 회전하여 위-오른쪽-아래-왼쪽 순서로 설정한다.

  • margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다
  • margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
  • margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
  • margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다.

 

box-sizing 속성

width: 200px 이고 height: 100px, padding: 20px, border: 5px solid black인 요소는 아래 그림처럼 나타낸다.

 

font 속성

font-style 이탤릭체 등의 글꼴의 스타일 지정
font-weight 글자 두께
font-variant 글꼴 변형 (소문자를 대문자로 바꾸는 등..) 
font-size 글자 크기
line-height 줄 간격
font-family 글꼴 (굴림, 돋움, ...)

 

* font 속성은 다음과 같은 순서로 세부 속성을 한 번에 기술한다.

font : font-style font-variant font-weight font-size/line-height font-family

 

1) font-style

글꼴의 스타일로, 주로 이탤릭체(기울임)를 설정하기 위해 사용한다.

  • normal : 기본
  • italic : 이탤릭체

 

2) font-weight

글꼴의 두께로, 미리 정의된 단어나 100~900 사이의 숫자를 통해 설정한다.

  • 100 : lighter
  • 200
  • 300
  • 400 : normal (기본값)
  • 500
  • 600
  • 700 : bold
  • 800
  • 900 : bolder

 

3) font-size

글자 크기로, px, em, 등의 단위와 small, big 등의 상수 크기를 사용할 수 있다.

(일반 웹 페이지에서는 px사용)

 

4) font-family

 글꼴 종류로, 쉼표( , )를 사용하여 여러 글꼴을 등록할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 글꼴이 사용자의 컴퓨터에 없을 때 그다음 글꼴을 사용한다.

 

font 사용법

.box1 {
	font-size : 20px;
    font-family : 나눔고딕, NanumGothic, ehedna, Dotum;
}
.box1 .title { font-weight : bold; }
.ex1 { font : 15px NanumGothic, sans-serif }
.ex2 { font : italic bold 12px/30px Dotum, sans-serif }

 

text-align 속성

text-align 속성은 텍스트의 정렬 방향을 의미한다.

  • left : 왼쪽 정렬
  • right : 오른쪽 정렬
  • center : 중앙 정렬
  • justify : 양쪽 정렬 (자동 줄 바꿈 시 오른쪽 경계선 부분 정리)

 

background 속성

background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한 번에 쓸 수 있는 속성이다.

background-color 배경 색
background-image 배경 이미지
background-repeat 배경 이미지 반복 여부
background-position 배경 이미지 위치

 

1) background-image

  • 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용한다.
  • 경로는 background-image : url("이미지 경로")처럼 작성한다.
  • 컨테이너의 크기와 상관없이 삽입된 background-image의 크기는 컨테이너에 맞춰 늘어나거나 줄어들지 않고 그대로 표시되며, 이미지보다 컨테이너가 더 크면 이미지는 반복되어 표시된다.

 

2) background-repeat

background-image로 컨테이너보다 작은 이미지를 적용하면 이미지가 반복되어 출력되는데 이때 background-repeat 속성을 사용하여 반복 여부를 지정할 수 있다.

예제

<style>
	.abox {
    	width : 500px;
        height : 100px;
    	margin-bottom : 15px;
        background-image : url("/images/attach/android.jpg");
        border : 1px solid #aaa;
    }
    #box3-1 { background-repeat : no-repeat }
    #box3-2{ background-repeat: repeat-x }
	#box3-3{ background-repeat: repeat-y }
	#box3-4{ background-repeat: repeat }
</style>

<div id="box3-1" class="abox"></div>
<div id="box3-2" class="abox"></div>
<div id="box3-3" class="abox"></div>
<div id="box3-4" class="abox"></div>

 

출력 결과

 

3) background-position

  • background-position 속성을 사용하면 이미지의 좌표를 수정할 수 있게 된다. 
  • 띄어쓰기를 기준으로 x좌표, y좌표를 지정하고 픽셀뿐만 아니라 left, top, center, bottom, right 등의 상수도 쓸 수 있다. 

예제

<style>
	.abox{
		width: 500px;
		height: 100px;
		margin-bottom: 15px;
		background-image: url("/images/attach/android.jpg");
		border: 1px solid #AAA;
	}
	#box4-1{ background-position:center center; background-repeat: no-repeat }
	#box4-2{ background-position:30px right; background-repeat: repeat }
	#box4-3{ background-position:-100px -60px; background-repeat: repeat-x }
	#box4-4{ background-position:40px -90px; background-repeat: repeat-y }
</style>

<div id="box4-1" class="abox"></div>
<div id="box4-2" class="abox"></div>
<div id="box4-3" class="abox"></div>
<div id="box4-4" class="abox"></div>

 

출력 결과

 

backgorund 사용법

#box { background : #09C url('image.png') no-repeat 10px center; }

 

border 속성

 border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한 번에 쓸 수 있는 속성이다.

width-style-color 순서로 사용한다.

 

1) border-width : 테두리의 두께로, 주로 px 단위를 사용

2) border-style : 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재

3) border-color : 테두리의 색상으로, 값은 color 속성의 포맷을 사용

 

예제

<style>
	.border-styles > p {
    	margin : 2px 0;
        padding : 1px 3px;
        border-width : 2px;
        border-color : #aaa;
    }
</style>
<div class="border-styles">
	<p style="border-style: solid">solid</p>
	<p style="border-style: dotted">dotted</p>
	<p style="border-style: dashed">dashed</p>
	<p style="border-style: double">double</p>
	<p style="border-style: groove">groove</p>
	<p style="border-style: ridge">ridge</p>
	<p style="border-style: inset">inset</p>
	<p style="border-style: outset">outset</p>
</div>

출력 결과

 

border 사용법

#box {
	border : 4px dotted green;
    border-bottom : 5px solid blue;
}

 

border-radius 속성

  • border-radius 속성은 요소의 테두리를 둥글게 만들어준다.
  • px, % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있다.
  • 총 4개의 모서리를 각각 다른 값으로도 줄 수 있으며, margin 및 padding 속성처럼 4개의 값을 띄어 쓰면 왼쪽-위부터 시계방향으로 각자 다른 값을 지정할 수 있다.

 

border-radius 사용법

#box {
	border-radius : 5px;
    border-radius : 1px 2px 3px 4px;
}

 

visibility 속성

visibility 속성은 태그의 가시성을 결정한다.

  • visible : 보임
  • hidden : 숨김 (영역 차지)
  • collapse : 겹치도록 지정 (테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소는 hidden으로 해석)
  • inherit : 부모 요소의 값을 상속 (기본 값)

 

display 속성

display 속성은 요소를 어떻게 보여줄지를 결정한다.

  • none : 보이지 않음 (영역 차지 X)
  • block : 블록 박스
  • inline : 인라인 박스
  • inline-block : block과 inline의 중간 형태

 

1) block

  • div 태그, p 태그, h 태그, li 태그 등이 해당
  • 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄 바꿈이 된 것처럼 보인다.
  • width, height 속성을 지정할 수 있다.

 

2) inline

  • span 태그, b 태그, i태그, a태그 등이 해당
  • block과 달리 줄 바꿈이 되지 않고, width와 height를 지정할 수 없다.
  • 글자나 문장에 효과를 주기 위해 존재하는 단위이다.

 

3) inline-block

  • block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.
  • Internet Explorer 7 이하에서는 사용할 수 없다.

 

float 속성

float라는 단어는 '뜨다'라는 의미이며, 웹 페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.

  • inherit : 부모 요소에서 상속
  • left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
  • right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display 속성은 무시된다.
  • none : 요소를 부유시키지 않음

left와 right를 통해 부유 속성을 지정 시 display는 무시된다.

 

예제

<html>
<head>
<style>
	.float-container{
		width: 320px;
		border: 2px solid #09c;
	}
	.float-container img{
		float: left;
		margin: 5px;
		padding: 5px;
		border: 2px solid #90C;
	}
</style>
</head>
<body>
	<div class="float-container">
		<img src="/images/attach/earth.jpg">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</body>
</html>

출력 결과

 

* 레이아웃에서의 float

예제

<html>
<head>
<style>
	.ex-layout{ height: 310px }
	.menu{
		width: 300px;
		height: 40px;
		border: 2px solid #09c;
		background-color: #d7f5ff;
	}
	.main .left-menu{
		float: left;
		width: 50px;
		height: 254px;
		border: 2px solid red;
		background-color: #ffe7d5;
	}
	.main .content{
		float: left;
		width: 250px;
		height: 250px;
	}
	.main .content .article{
		height: 200px;
		border: 2px solid blue;
		background-color: #e2e9ff;
	}
	.main .content .comment{
		height: 50px;
		border: 2px solid purple;
		background-color: #ffddff;
	}
</style>
</head>
<body>
	<div class="ex-layout">
		<div class="menu">global menu</div>
		<div class="main">
			<div class="left-menu">left menu</div>
			<div class="content">
				<div class="article">article</div>
				<div class="comment">comment</div>
			</div>
		</div>
	</div>
</body>
</html>

출력 결과

 

clear 속성

float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰인다.

  • left : 좌측 부유 제거
  • right : 우측 부유 제거
  • both : 양쪽 모두 제거

 

예제

<html>
<head>
<style>
	.float-container{ width: 320px; border: 2px solid #09c; }
	.float-container img{ float: left; margin: 5px; padding: 5px; border: 2px solid #90C; }
</style>
</head>
<body>
	<div class="float-container">
		<img src="/images/attach/earth.jpg">
		<p>This is first line with floating image.</p>
		<p style="clear: both">This is second line with cleared property.</p>
	</div>
</body>
</html>

출력 결과

 

* 레이아웃에서의 clear

예제

<style>
	.box-container{
		width: 350px;
		border: 2px solid #09c;
		background-color: #d7f5ff;
	}
	.box-container .box{
		width: 80px;
		height: 40px;
		border: 2px solid red;
		background-color: #ffe7d5;
	}
</style>
<div class="box-container">
	<div class="box" style="float: left">박스1</div>
	<div class="box" style="float: right">박스2</div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>

출력 결과

예제

<div class="box-container">
	<div class="box" style="float: left">박스1</div>
	<div class="box" style="float: right">박스2</div>
	<div style="clear: both"></div>
</div>
<div>박스 아래에 나타나야 하는 내용</div>

출력 결과

 

* after 가상 선택자와 clear

clear 해주기 위해서는 float 된 요소 다음에 clear 하는 태그를 따로 삽입해야 하는데, 이때 가상 클래스 선택자를 이용한다.

부유를 제거하고 싶은 컨테이너에 다음 클래스를 적용시킨다.

.clearfix:after { content: ""; display: block; clear: both }

 

position 속성

position 속성은 태그를 어떻게 위치시킬지를 정의한다.

  • static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
  • absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있다.
  • relative : 원래 있던 위치를 기준으로 좌표를 지정한다.
  • fixed : 스크롤과 상관없이 항상 문서 최 좌측 상단을 기준으로 좌표를 고정한다.
  • inherit : 부모 태그의 속성 값을 상속받는다.

좌표를 지정해주기 위해서는 left, right, top, bottom 속성과 함께 사용한다.

position을 absolute나 fixed로 설정 시 가로 크기가 100%가 되는 block 태그의 특징이 사라진다.

 

cursor 속성

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.

  • auto : 자동
  • default : 기본값 (화살표)
  • pointer : 손가락 모양 (클릭 가능한 버튼)
  • wait : 로딩

 

 

[출처] ofcourse.kr/css-course/font-%EC%86%8D%EC%84%B1

'프로그램 > HTML CSS JavaScript' 카테고리의 다른 글

[HTML] HTML 구조  (0) 2021.03.03
[HTML] HTML 태그 정리  (0) 2021.03.03
FrontEnd : HTML, CSS, JAVASCRIPT 이해  (0) 2021.03.03

 

쿼리 식은 from 절로 시작해야 한다. 또한 쿼리 식은 from 절로 시작하는 하위 쿼리를 포함할 수 있다.

 

from절에 들어갈 내용

  • 쿼리 또는 하위 쿼리가 실행될 데이터 소스
  • 소스 시퀀스의 각 요소를 나타내는 지역 범위 변수
  • from절에서 참조되는 데이터 소스는 IEnumerable, IEnumerable<T> 형식이거나 IQueryable<T>와 같은 파생 형식이어야 한다.
class LowNums
{
	static void Main()
    {
    	int[] numbers = {5, 4, 1, 3, 9, 8, 6, 7, 2, 0};
        
        var lowNums = from num in numbers
        	where num < 5
            select num;
            
        foreach (int i in lowNums)
        {
        	Console.Write(i + " ");
        }
    }
}
// Output : 4 1 3 2 0 

 

 

[출처] docs.microsoft.com/ko-kr/dotnet/csharp/language-reference/keywords/from-clause

+ Recent posts