Info🔍/HTML&CSS
[Portfolio 스킨] 02. 인라인 코드 블록 만들기

별이의 라이프2024. 11. 30. 16:50

검색하다보니까 인라인 코드라는 걸 적용하면 이브길래 한번 해볼거다.

챗GPT한테 인라인 코드가 뭐냐고 물어봤는데

인라인 코드는 함수의 내용을 호출 지점에 직접 삽입하는 프로그래밍 기법입니다. 이 방식은 일반적인 함수 호출 과정을 거치지 않고, 함수의 코드를 호출된 자리에 바로 삽입합니다.

이게 무슨말인지 모르겠다.....

설명만 보면 적용 모습이랑 너무 다른데...

 

적용 모습

 

스킨 수정 과정

1. 편집화면으로 들어간다.

  • 꾸미기 - 스킨 변경 - 변경 - 스킨 편집 - HTML 편집 - CSS 편집

 

2. 적당한 위치에 아래 코드를 입력한다.

/* 인라인 코드 */
.inkey { 
    background-color: #f7f7f7; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; 
    color: #333; 
    display: inline-block; 
    font-size: 80%; 
    font-weight: bold; 
    line-height: 1.4; 
    margin: 0 0.1em; 
    padding: 0.1em 0.5em; 
    text-shadow: 0 1px 0 #fff; 
    white-space: nowrap; 
}

<참고 : TMAX님>

 

3. 코드 수정이 끝났다면 적용을 누른다.

 

사용 방법

글쓰기 시 HTML 모드에서 아래 코드를 입력하고 내용 부분에 필요한 내용을 입력하면 된다.

<span class="inkey">내용</span>

 

서식으로 미리 만들어두면 편하게 사용할 수 있다.

 

top
bottom